@font-face {
  font-family: "Nunito";
  src: url("fonts/nunito-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

/* Book commerce shell */
html.ap-ui.ap-commerce-books #gem-pill,
html.ap-ui.ap-commerce-books #category-bar {
  display: none !important;
}

html.ap-ui.ap-commerce-books #puzzle-grid.ap-books-surface {
  display: block !important;
  width: 100%;
}

html.ap-ui.ap-commerce-books .ap-books-heading {
  margin: 2px 1px 22px;
  padding: 18px 18px 17px;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.94);
  border-radius: 25px;
  color: #fff;
  background:
    radial-gradient(circle at 90% 5%, rgba(255, 255, 255, 0.3), transparent 30%),
    linear-gradient(135deg, #5f32b3 0%, #8b5cf6 48%, #db2777 100%);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.28),
    0 7px 0 #47207e,
    0 16px 24px rgba(59, 29, 100, 0.27);
}

html.ap-ui.ap-commerce-books .ap-books-heading small,
html.ap-ui.ap-commerce-books .ap-books-heading h2,
html.ap-ui.ap-commerce-books .ap-books-heading p {
  margin: 0;
  color: inherit;
}

html.ap-ui.ap-commerce-books .ap-books-heading small {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.82;
}

html.ap-ui.ap-commerce-books .ap-books-heading h2 {
  margin-top: 2px;
  font-size: clamp(27px, 8vw, 39px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  text-shadow: 0 3px 0 rgba(47, 18, 86, 0.25);
}

html.ap-ui.ap-commerce-books .ap-books-heading p {
  max-width: 660px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
  opacity: 0.92;
}

html.ap-ui.ap-commerce-books .ap-store-heading {
  background:
    radial-gradient(circle at 90% 5%, rgba(255, 255, 255, 0.34), transparent 30%),
    linear-gradient(135deg, #b54d13 0%, #ed8a1f 48%, #db2777 100%);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.28),
    0 7px 0 #87370d,
    0 16px 24px rgba(91, 45, 18, 0.27);
}

html.ap-ui.ap-commerce-books .ap-book-section {
  width: 100%;
  margin: 0 0 27px;
}

html.ap-ui.ap-commerce-books .ap-book-section > header {
  padding: 0 4px 11px;
  align-items: end;
  justify-content: space-between;
  display: flex;
}

html.ap-ui.ap-commerce-books .ap-book-section > header h2,
html.ap-ui.ap-commerce-books .ap-book-section > header p {
  margin: 0;
}

html.ap-ui.ap-commerce-books .ap-book-section > header h2 {
  color: var(--ap-plum);
  font-size: clamp(19px, 5.7vw, 25px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

html.ap-ui.ap-commerce-books .ap-book-section > header p {
  margin-top: 3px;
  color: var(--ap-muted);
  font-size: 11px;
  font-weight: 800;
}

html.ap-ui.ap-commerce-books .ap-book-rail {
  margin: 0 -13px;
  padding: 6px 13px 16px;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  display: grid;
  grid-auto-columns: minmax(150px, 44vw);
  grid-auto-flow: column;
}

html.ap-ui.ap-commerce-books .ap-book-rail::-webkit-scrollbar {
  display: none;
}

html.ap-ui.ap-commerce-books .ap-book-card {
  position: relative;
  min-width: 0;
  padding: 10px 10px 13px;
  border: 3px solid rgba(255, 255, 255, 0.94);
  border-radius: 23px;
  color: var(--ap-plum);
  text-align: left;
  scroll-snap-align: start;
  background: linear-gradient(145deg, #fff, #faf5ff 60%, #eee6fa);
  box-shadow:
    inset 0 3px 0 #fff,
    inset 0 -2px 0 rgba(91, 61, 131, 0.12),
    0 7px 0 rgba(76, 29, 149, 0.38),
    0 14px 20px rgba(59, 29, 100, 0.2);
  transform: translateY(0);
  transition: transform 130ms ease, box-shadow 130ms ease;
}

html.ap-ui.ap-commerce-books .ap-book-card:active {
  transform: translateY(5px);
  box-shadow:
    inset 0 3px 0 #fff,
    0 2px 0 rgba(76, 29, 149, 0.38),
    0 7px 12px rgba(59, 29, 100, 0.2);
}

html.ap-ui.ap-commerce-books .ap-book-object {
  position: relative;
  width: 100%;
  aspect-ratio: 0.78;
  perspective: 900px;
  display: block;
}

html.ap-ui.ap-commerce-books .ap-book-cover {
  position: absolute;
  inset: 1px 7px 7px 2px;
  z-index: 2;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.82);
  border-radius: 8px 18px 18px 8px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(35, 12, 71, 0.05), rgba(35, 12, 71, 0.56)),
    var(--ap-book-cover) center / cover no-repeat,
    linear-gradient(135deg, #8b5cf6, #db2777);
  box-shadow:
    inset 9px 0 10px rgba(37, 14, 72, 0.3),
    inset -2px 0 0 rgba(255, 255, 255, 0.24),
    5px 7px 0 #d7cce6,
    9px 12px 14px rgba(42, 17, 82, 0.3);
  transform: rotateY(-6deg) rotateZ(-0.7deg);
  transform-origin: left center;
}

html.ap-ui.ap-commerce-books .ap-book-cover::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 9px;
  z-index: 3;
  width: 2px;
  content: "";
  background: rgba(255, 255, 255, 0.42);
  box-shadow: 3px 0 7px rgba(39, 13, 75, 0.4);
}

html.ap-ui.ap-commerce-books .ap-book-cover-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 13%, rgba(255, 255, 255, 0.26), transparent 26%),
    linear-gradient(180deg, transparent 38%, rgba(34, 11, 66, 0.78));
}

html.ap-ui.ap-commerce-books .ap-book-cover-copy {
  position: absolute;
  right: 10px;
  bottom: 12px;
  left: 18px;
  z-index: 3;
  text-shadow: 0 2px 4px rgba(31, 10, 59, 0.8);
}

html.ap-ui.ap-commerce-books .ap-book-cover-copy small,
html.ap-ui.ap-commerce-books .ap-book-cover-copy strong {
  display: block;
}

html.ap-ui.ap-commerce-books .ap-book-cover-copy small {
  margin-bottom: 3px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.82;
}

html.ap-ui.ap-commerce-books .ap-book-cover-copy strong {
  font-size: clamp(14px, 4.2vw, 19px);
  font-weight: 900;
  line-height: 1.05;
}

html.ap-ui.ap-commerce-books .ap-book-pages-edge {
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 9px;
  height: 13px;
  border: 1px solid #c7b9da;
  border-radius: 3px 3px 12px 5px;
  background: repeating-linear-gradient(180deg, #fff 0 2px, #ded5e9 2px 3px);
  box-shadow: 3px 4px 7px rgba(49, 24, 86, 0.18);
  transform: skewX(-10deg);
}

html.ap-ui.ap-commerce-books .ap-book-card-copy {
  min-height: 76px;
  padding: 9px 3px 0;
  display: block;
}

html.ap-ui.ap-commerce-books .ap-book-card-copy > strong,
html.ap-ui.ap-commerce-books .ap-book-card-copy > small {
  display: block;
}

html.ap-ui.ap-commerce-books .ap-book-card-copy > strong {
  min-height: 2.3em;
  overflow: hidden;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
}

html.ap-ui.ap-commerce-books .ap-book-card-copy > small {
  margin-top: 4px;
  overflow: hidden;
  color: var(--ap-muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.ap-ui.ap-commerce-books .ap-book-progress {
  height: 7px;
  margin-top: 7px;
  padding: 1px;
  overflow: hidden;
  border-radius: 999px;
  background: #ddd4eb;
  box-shadow: inset 0 2px 3px rgba(59, 29, 100, 0.15);
  display: block;
}

html.ap-ui.ap-commerce-books .ap-book-progress > i {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ap-purple), var(--ap-pink));
  display: block;
}

html.ap-ui.ap-commerce-books .ap-book-status {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 5;
  min-width: 54px;
  padding: 6px 8px;
  border: 3px solid #fff;
  border-radius: 999px;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  background: linear-gradient(to bottom, var(--ap-pink-lit), var(--ap-pink-deep));
  box-shadow: 0 4px 0 var(--ap-pink-base), 0 8px 12px rgba(59, 29, 100, 0.22);
}

html.ap-ui.ap-commerce-books .ap-book-status.is-owned {
  background: linear-gradient(to bottom, #73e9d7, #16a37d);
  box-shadow: 0 4px 0 #087c5d, 0 8px 12px rgba(59, 29, 100, 0.22);
}

html.ap-ui.ap-commerce-books .ap-book-continue,
html.ap-ui.ap-commerce-books .ap-daily-book-sample {
  width: 100%;
  min-height: 105px;
  padding: 10px;
  border: 3px solid #fff;
  border-radius: 23px;
  align-items: center;
  gap: 12px;
  color: var(--ap-plum);
  text-align: left;
  background: linear-gradient(135deg, #fff, #f6f0ff);
  box-shadow: 0 7px 0 #c6b7df, 0 14px 21px rgba(59, 29, 100, 0.2);
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
}

html.ap-ui.ap-commerce-books .ap-book-continue img,
html.ap-ui.ap-commerce-books .ap-daily-book-sample img {
  width: 82px;
  height: 82px;
  border: 3px solid #fff;
  border-radius: 17px;
  object-fit: cover;
  box-shadow: 0 4px 0 #c6b7df;
}

html.ap-ui.ap-commerce-books .ap-book-continue > span,
html.ap-ui.ap-commerce-books .ap-daily-book-sample > span {
  min-width: 0;
}

html.ap-ui.ap-commerce-books .ap-book-continue small,
html.ap-ui.ap-commerce-books .ap-book-continue strong,
html.ap-ui.ap-commerce-books .ap-book-continue span span,
html.ap-ui.ap-commerce-books .ap-daily-book-sample small,
html.ap-ui.ap-commerce-books .ap-daily-book-sample strong,
html.ap-ui.ap-commerce-books .ap-daily-book-sample span span {
  display: block;
}

html.ap-ui.ap-commerce-books .ap-book-continue small,
html.ap-ui.ap-commerce-books .ap-daily-book-sample small {
  color: var(--ap-pink-deep);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

html.ap-ui.ap-commerce-books .ap-book-continue strong,
html.ap-ui.ap-commerce-books .ap-daily-book-sample strong {
  margin-top: 2px;
  overflow: hidden;
  font-size: 15px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.ap-ui.ap-commerce-books .ap-book-continue span span,
html.ap-ui.ap-commerce-books .ap-daily-book-sample span span {
  margin-top: 3px;
  color: var(--ap-muted);
  font-size: 10px;
  font-weight: 800;
}

html.ap-ui.ap-commerce-books .ap-book-continue > b,
html.ap-ui.ap-commerce-books .ap-daily-book-sample > b {
  padding: 10px 12px;
  border-radius: 14px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  background: linear-gradient(to bottom, var(--ap-purple-lit), var(--ap-purple-deep));
  box-shadow: 0 4px 0 var(--ap-purple-base);
}

html.ap-ui.ap-commerce-books .ap-find-books {
  width: 100%;
  margin-top: 6px;
  padding: 19px;
  border: 3px solid #fff;
  border-radius: 24px;
  align-items: center;
  gap: 16px;
  color: var(--ap-plum);
  background: linear-gradient(135deg, #fff9e8, #fff, #f9e8ff);
  box-shadow: 0 7px 0 #d2b779, 0 15px 23px rgba(76, 50, 20, 0.18);
  display: flex;
}

html.ap-ui.ap-commerce-books .ap-find-books > span {
  flex: 1 1 auto;
  min-width: 0;
}

html.ap-ui.ap-commerce-books .ap-find-books small,
html.ap-ui.ap-commerce-books .ap-find-books strong,
html.ap-ui.ap-commerce-books .ap-find-books p {
  margin: 0;
  display: block;
}

html.ap-ui.ap-commerce-books .ap-find-books small {
  color: #b25813;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

html.ap-ui.ap-commerce-books .ap-find-books strong {
  margin-top: 2px;
  font-size: 19px;
  font-weight: 900;
}

html.ap-ui.ap-commerce-books .ap-find-books p {
  margin-top: 5px;
  color: var(--ap-muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.4;
}

html.ap-ui.ap-commerce-books .ap-book-detail {
  width: 100%;
}

html.ap-ui.ap-commerce-books .ap-book-back {
  min-height: 44px;
  margin: 1px 0 15px;
  padding: 8px 13px;
  align-items: center;
  gap: 7px;
  display: inline-flex;
}

html.ap-ui.ap-commerce-books .ap-book-back .ap-icon {
  width: 18px;
  height: 18px;
}

html.ap-ui.ap-commerce-books .ap-book-detail-hero {
  padding: 17px;
  border: 4px solid #fff;
  border-radius: 29px;
  align-items: center;
  gap: 19px;
  background:
    radial-gradient(circle at 95% 5%, rgba(236, 72, 153, 0.14), transparent 30%),
    linear-gradient(145deg, #fff, #f9f5ff 65%, #eee6fa);
  box-shadow: 0 8px 0 rgba(76, 29, 149, 0.4), 0 18px 28px rgba(59, 29, 100, 0.24);
  display: grid;
  grid-template-columns: minmax(130px, 35%) minmax(0, 1fr);
}

html.ap-ui.ap-commerce-books .ap-detail-book-object {
  width: 100%;
  max-width: 245px;
  margin: auto;
}

html.ap-ui.ap-commerce-books .ap-book-detail-copy {
  min-width: 0;
}

html.ap-ui.ap-commerce-books .ap-book-detail-copy > small {
  color: var(--ap-pink-deep);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html.ap-ui.ap-commerce-books .ap-book-detail-copy h2,
html.ap-ui.ap-commerce-books .ap-book-detail-copy p {
  margin: 0;
}

html.ap-ui.ap-commerce-books .ap-book-detail-copy h2 {
  margin-top: 3px;
  color: var(--ap-plum);
  font-size: clamp(24px, 6vw, 36px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

html.ap-ui.ap-commerce-books .ap-book-detail-copy > p {
  margin-top: 7px;
  color: var(--ap-muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

html.ap-ui.ap-commerce-books .ap-book-facts {
  margin: 13px 0 11px;
  gap: 7px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html.ap-ui.ap-commerce-books .ap-book-facts > span {
  min-height: 54px;
  padding: 8px 5px;
  border: 2px solid #e8def4;
  border-radius: 14px;
  text-align: center;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 -2px 0 rgba(91, 61, 131, 0.08);
}

html.ap-ui.ap-commerce-books .ap-book-facts strong,
html.ap-ui.ap-commerce-books .ap-book-facts small {
  display: block;
}

html.ap-ui.ap-commerce-books .ap-book-facts strong {
  color: var(--ap-purple-deep);
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

html.ap-ui.ap-commerce-books .ap-book-facts small {
  margin-top: 4px;
  color: var(--ap-muted);
  font-size: 8px;
  font-weight: 850;
  line-height: 1.15;
}

html.ap-ui.ap-commerce-books .ap-book-detail-progress > span {
  align-items: center;
  justify-content: space-between;
  color: var(--ap-muted);
  font-size: 10px;
  font-weight: 800;
  display: flex;
}

html.ap-ui.ap-commerce-books .ap-book-detail-progress > span b {
  color: var(--ap-plum);
}

html.ap-ui.ap-commerce-books .ap-book-detail-progress > i {
  height: 9px;
  margin-top: 5px;
  padding: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: #ded5e9;
  box-shadow: inset 0 2px 3px rgba(59, 29, 100, 0.14);
  display: block;
}

html.ap-ui.ap-commerce-books .ap-book-detail-progress > i > b {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ap-purple), var(--ap-pink));
  display: block;
}

html.ap-ui.ap-commerce-books .ap-book-actions {
  margin-top: 14px;
  gap: 9px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html.ap-ui.ap-commerce-books .ap-book-actions > button:first-child {
  grid-column: 1 / -1;
}

html.ap-ui.ap-commerce-books .ap-printable-book {
  width: 100%;
  margin-top: 23px;
  padding: 16px;
  border: 3px solid #fff;
  border-radius: 23px;
  align-items: center;
  gap: 13px;
  color: var(--ap-plum);
  background: linear-gradient(135deg, #fff8dc, #fff, #f6edff);
  box-shadow: 0 6px 0 #d2b779, 0 13px 20px rgba(76, 50, 20, 0.16);
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
}

html.ap-ui.ap-commerce-books .ap-printable-book > span {
  width: 46px;
  height: 46px;
  border: 2px solid #fff;
  border-radius: 14px;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(to bottom, #f3b43c, #d87811);
  box-shadow: 0 4px 0 #9d4c09;
  display: flex;
}

html.ap-ui.ap-commerce-books .ap-printable-book small,
html.ap-ui.ap-commerce-books .ap-printable-book strong,
html.ap-ui.ap-commerce-books .ap-printable-book p {
  margin: 0;
  display: block;
}

html.ap-ui.ap-commerce-books .ap-printable-book small {
  color: #b25813;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

html.ap-ui.ap-commerce-books .ap-printable-book strong {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 900;
}

html.ap-ui.ap-commerce-books .ap-printable-book p {
  margin-top: 3px;
  color: var(--ap-muted);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.35;
}

html.ap-ui.ap-commerce-books .ap-book-chapters {
  margin-top: 28px;
}

html.ap-ui.ap-commerce-books .ap-book-chapter {
  margin-bottom: 30px;
  scroll-margin-top: 18px;
}

html.ap-ui.ap-commerce-books .ap-book-chapter > header {
  margin: 0 3px 11px;
  align-items: end;
  justify-content: space-between;
  display: flex;
}

html.ap-ui.ap-commerce-books .ap-book-chapter > header small,
html.ap-ui.ap-commerce-books .ap-book-chapter > header h3 {
  margin: 0;
  display: block;
}

html.ap-ui.ap-commerce-books .ap-book-chapter > header small {
  color: var(--ap-pink-deep);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html.ap-ui.ap-commerce-books .ap-book-chapter > header h3 {
  margin-top: 1px;
  color: var(--ap-plum);
  font-size: 19px;
  font-weight: 900;
}

html.ap-ui.ap-commerce-books .ap-book-chapter > header > b {
  padding: 6px 9px;
  border: 2px solid #e4d9f1;
  border-radius: 999px;
  color: var(--ap-purple-deep);
  font-size: 9px;
  font-weight: 900;
  background: #fff;
}

html.ap-ui.ap-commerce-books .ap-book-pages {
  gap: 15px 11px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html.ap-ui.ap-commerce-books .ap-book-page {
  position: relative;
  min-width: 0;
  padding: 7px 7px 9px;
  overflow: visible;
  border: 3px solid #fff;
  border-radius: 20px;
  color: var(--ap-plum);
  text-align: left;
  background: linear-gradient(145deg, #fff, #f7f2fd);
  box-shadow: 0 6px 0 #c6b7df, 0 12px 17px rgba(59, 29, 100, 0.17);
  transform: translateY(0);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

html.ap-ui.ap-commerce-books .ap-book-page:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #c6b7df, 0 6px 9px rgba(59, 29, 100, 0.16);
}

html.ap-ui.ap-commerce-books .ap-book-page.is-sample {
  box-shadow: 0 6px 0 #cc7b17, 0 12px 17px rgba(91, 49, 15, 0.19);
}

html.ap-ui.ap-commerce-books .ap-book-page-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid #ddd2eb;
  border-radius: 13px;
  background: #eee8f6;
  display: block;
}

html.ap-ui.ap-commerce-books .ap-book-page-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

html.ap-ui.ap-commerce-books .ap-book-page-art.is-placeholder::after {
  position: absolute;
  inset: 0;
  padding: 12px;
  align-items: center;
  justify-content: center;
  color: var(--ap-muted);
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  content: "Artwork coming soon";
  background: linear-gradient(135deg, #f7f2fd, #eee5f7);
  display: flex;
}

html.ap-ui.ap-commerce-books .ap-book-page.is-locked .ap-book-page-art img {
  filter: saturate(0.45) brightness(0.78);
  transform: scale(1.02);
}

html.ap-ui.ap-commerce-books .ap-page-lock,
html.ap-ui.ap-commerce-books .ap-page-finished {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border: 3px solid #fff;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(75, 36, 117, 0.88);
  box-shadow: 0 4px 0 rgba(41, 16, 78, 0.7);
  transform: translate(-50%, -50%);
  display: flex;
}

html.ap-ui.ap-commerce-books .ap-page-finished {
  top: 8px;
  right: 8px;
  left: auto;
  width: 29px;
  height: 29px;
  background: #16a37d;
  box-shadow: 0 3px 0 #087c5d;
  transform: none;
}

html.ap-ui.ap-commerce-books .ap-page-lock .ap-icon,
html.ap-ui.ap-commerce-books .ap-page-finished .ap-icon {
  width: 18px;
  height: 18px;
}

html.ap-ui.ap-commerce-books .ap-book-page-copy {
  min-height: 65px;
  padding: 8px 3px 0;
  display: block;
}

html.ap-ui.ap-commerce-books .ap-book-page-copy small,
html.ap-ui.ap-commerce-books .ap-book-page-copy strong,
html.ap-ui.ap-commerce-books .ap-book-page-copy span {
  display: block;
}

html.ap-ui.ap-commerce-books .ap-book-page-copy small {
  color: var(--ap-pink-deep);
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

html.ap-ui.ap-commerce-books .ap-book-page-copy strong {
  margin-top: 2px;
  overflow: hidden;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.ap-ui.ap-commerce-books .ap-book-page-copy span {
  margin-top: 3px;
  color: var(--ap-muted);
  font-size: 9px;
  font-weight: 800;
}

html.ap-ui.ap-commerce-books #difficulty-picker[data-commerce="books"] #picker-reward,
html.ap-ui.ap-commerce-books #difficulty-picker[data-commerce="books"] .piece-reward {
  display: none !important;
}

html.ap-ui .ap-parental-gate {
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
}

html.ap-ui .ap-parental-gate > .ap-card {
  width: min(100%, 390px);
  padding: 23px 20px 20px;
  border: 4px solid #fff;
  border-radius: 27px;
  text-align: center;
  background: linear-gradient(145deg, #fff, #f8f3ff);
  box-shadow: 0 8px 0 rgba(76, 29, 149, 0.44), 0 20px 40px rgba(32, 12, 65, 0.35);
}

html.ap-ui .ap-parental-gate h2,
html.ap-ui .ap-parental-gate p {
  margin: 0;
}

html.ap-ui .ap-parental-gate h2 {
  margin-top: 8px;
  color: var(--ap-plum);
  font-size: 24px;
  font-weight: 900;
}

html.ap-ui .ap-parental-gate > .ap-card > p:not(.ap-parental-error) {
  margin-top: 5px;
  color: var(--ap-muted);
  font-size: 12px;
  font-weight: 800;
}

html.ap-ui .ap-parental-gate label {
  margin: 17px 0 7px;
  color: var(--ap-plum);
  font-size: 20px;
  font-weight: 900;
  display: block;
}

html.ap-ui .ap-parental-answer {
  width: 100%;
  height: 58px;
  padding: 8px 14px;
  border: 3px solid #d9caec;
  border-radius: 16px;
  outline: 0;
  color: var(--ap-plum);
  font: 900 24px/1 var(--ap-font);
  text-align: center;
  background: #fff;
  box-shadow: inset 0 3px 5px rgba(59, 29, 100, 0.1);
}

html.ap-ui .ap-parental-answer:focus {
  border-color: var(--ap-purple);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.18), inset 0 3px 5px rgba(59, 29, 100, 0.1);
}

html.ap-ui .ap-parental-error {
  min-height: 1.5em;
  margin: 7px 0 4px !important;
  color: #bd204f;
  font-size: 11px;
  font-weight: 850;
}

html.ap-ui .ap-parental-gate button {
  width: 100%;
  margin-top: 9px;
}

html.ap-ui .ap-book-purchase-sheet {
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
}

html.ap-ui .ap-book-purchase-sheet > .ap-card {
  position: relative;
  width: min(100%, 430px);
  max-height: min(720px, calc(100dvh - 28px));
  padding: 20px;
  overflow-y: auto;
  border: 4px solid #fff;
  border-radius: 28px;
  color: var(--ap-plum);
  background: linear-gradient(145deg, #fff, #f8f3ff);
  box-shadow: 0 8px 0 rgba(76, 29, 149, 0.44), 0 20px 40px rgba(32, 12, 65, 0.35);
}

html.ap-ui .ap-purchase-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: var(--ap-plum);
  background: #eee6f8;
  box-shadow: 0 4px 0 #c6b7df;
  display: flex;
}

html.ap-ui .ap-purchase-head {
  padding-right: 37px;
  align-items: center;
  gap: 13px;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
}

html.ap-ui .ap-purchase-head img {
  width: 86px;
  height: 105px;
  border: 4px solid #fff;
  border-radius: 8px 15px 15px 8px;
  object-fit: cover;
  box-shadow: 5px 5px 0 #d5c9e4, 8px 10px 14px rgba(59, 29, 100, 0.24);
}

html.ap-ui .ap-purchase-head small,
html.ap-ui .ap-purchase-head h2,
html.ap-ui .ap-purchase-head p {
  margin: 0;
  display: block;
}

html.ap-ui .ap-purchase-head small {
  color: var(--ap-pink-deep);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html.ap-ui .ap-purchase-head h2 {
  margin-top: 3px;
  font-size: clamp(20px, 6vw, 28px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

html.ap-ui .ap-purchase-head p {
  margin-top: 5px;
  color: var(--ap-muted);
  font-size: 10px;
  font-weight: 800;
}

html.ap-ui .ap-book-purchase-sheet ul {
  margin: 17px 0 12px;
  padding: 0;
  gap: 8px;
  list-style: none;
  display: grid;
}

html.ap-ui .ap-book-purchase-sheet li {
  min-height: 56px;
  padding: 9px 11px;
  border: 2px solid #e6dcf2;
  border-radius: 16px;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.86);
  display: flex;
}

html.ap-ui .ap-book-purchase-sheet li > .ap-icon {
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  color: #16a37d;
}

html.ap-ui .ap-book-purchase-sheet li.ap-purchase-bonus {
  border-color: #f0d591;
  background: #fff8dc;
}

html.ap-ui .ap-book-purchase-sheet li.ap-purchase-bonus > .ap-icon {
  color: #df8619;
}

html.ap-ui .ap-book-purchase-sheet li strong,
html.ap-ui .ap-book-purchase-sheet li small {
  display: block;
}

html.ap-ui .ap-book-purchase-sheet li strong {
  font-size: 12px;
  font-weight: 900;
}

html.ap-ui .ap-book-purchase-sheet li small {
  margin-top: 2px;
  color: var(--ap-muted);
  font-size: 9px;
  font-weight: 750;
}

html.ap-ui .ap-purchase-error {
  min-height: 1.5em;
  margin: 0 0 4px;
  color: #bd204f;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.35;
  text-align: center;
}

html.ap-ui .ap-book-purchase-sheet > .ap-card > button:not(.ap-purchase-close) {
  width: 100%;
  margin-top: 9px;
}

html.ap-ui .ap-book-purchase-sheet > .ap-card.is-success {
  padding-top: 27px;
  text-align: center;
}

html.ap-ui .ap-book-purchase-sheet > .ap-card.is-success h2,
html.ap-ui .ap-book-purchase-sheet > .ap-card.is-success p {
  margin: 0;
}

html.ap-ui .ap-book-purchase-sheet > .ap-card.is-success h2 {
  margin-top: 13px;
  font-size: 25px;
  font-weight: 900;
}

html.ap-ui .ap-book-purchase-sheet > .ap-card.is-success p {
  margin: 7px 0 13px;
  color: var(--ap-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

html.ap-ui .ap-purchase-success-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto;
  border: 4px solid #fff;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(to bottom, #70e8d4, #16a37d);
  box-shadow: 0 6px 0 #087c5d, 0 13px 19px rgba(59, 29, 100, 0.2);
  display: flex;
}

html.ap-ui .ap-purchase-success-icon .ap-icon {
  width: 34px;
  height: 34px;
}

@media (max-width: 430px) {
  html.ap-ui.ap-commerce-books .ap-book-detail-hero {
    padding: 14px;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 13px;
  }

  html.ap-ui.ap-commerce-books .ap-book-detail-copy h2 {
    font-size: 21px;
  }

  html.ap-ui.ap-commerce-books .ap-book-detail-copy > p {
    font-size: 10px;
  }

  html.ap-ui.ap-commerce-books .ap-book-facts {
    margin-block: 9px;
    gap: 4px;
  }

  html.ap-ui.ap-commerce-books .ap-book-facts > span {
    min-height: 48px;
    padding-inline: 2px;
  }

  html.ap-ui.ap-commerce-books .ap-book-facts strong {
    font-size: 14px;
  }

  html.ap-ui.ap-commerce-books .ap-book-actions {
    grid-template-columns: 1fr;
  }

  html.ap-ui.ap-commerce-books .ap-book-actions > button:first-child {
    grid-column: auto;
  }

  html.ap-ui.ap-commerce-books .ap-printable-book {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  html.ap-ui.ap-commerce-books .ap-printable-book > button {
    grid-column: 1 / -1;
  }

  html.ap-ui.ap-commerce-books .ap-book-continue,
  html.ap-ui.ap-commerce-books .ap-daily-book-sample {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  html.ap-ui.ap-commerce-books .ap-book-continue img,
  html.ap-ui.ap-commerce-books .ap-daily-book-sample img {
    width: 70px;
    height: 70px;
  }

  html.ap-ui.ap-commerce-books .ap-book-continue > b,
  html.ap-ui.ap-commerce-books .ap-daily-book-sample > b {
    grid-column: 1 / -1;
    text-align: center;
  }

  html.ap-ui.ap-commerce-books .ap-find-books {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (min-width: 600px) {
  html.ap-ui.ap-commerce-books .ap-book-rail {
    grid-auto-columns: minmax(172px, 28%);
  }

  html.ap-ui.ap-commerce-books .ap-book-pages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 920px) {
  html.ap-ui.ap-commerce-books .ap-book-rail {
    margin-inline: 0;
    padding-inline: 0;
    grid-auto-columns: minmax(180px, calc(20% - 14px));
  }

  html.ap-ui.ap-commerce-books .ap-book-pages {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  html.ap-ui.ap-commerce-books .ap-book-detail-hero {
    grid-template-columns: 250px minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.ap-ui.ap-commerce-books .ap-book-card,
  html.ap-ui.ap-commerce-books .ap-book-page {
    transition: none;
  }
}

@font-face {
  font-family: "Nunito";
  src: url("fonts/nunito-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("fonts/nunito-800.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("fonts/nunito-900.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

html.ap-ui {
  color-scheme: light;
  --ap-purple-lit: #c4b5fd;
  --ap-purple: #8b5cf6;
  --ap-purple-deep: #6d28d9;
  --ap-purple-base: #4c1d95;
  --ap-pink-lit: #f9a8d4;
  --ap-pink: #ec4899;
  --ap-pink-deep: #be185d;
  --ap-pink-base: #831843;
  --ap-pearl: #fffdf8;
  --ap-pearl-cool: #fffaff;
  --ap-lilac: #eee8ff;
  --ap-lilac-deep: #ddd2fb;
  --ap-plum: #3b1d64;
  --ap-ink: #1e293b;
  --ap-muted: #76678f;
  --ap-muted-soft: #9b8db1;
  --ap-sky: #38bdf8;
  --ap-mint: #2dd4bf;
  --ap-success: #16a34a;
  --ap-gold: #f4c84a;
  --ap-coral: #ef5b7e;
  --ap-coral-base: #9f1239;
  --ap-white-rim: rgba(255, 255, 255, 0.88);
  --ap-contact: rgba(47, 18, 91, 0.3);
  --ap-contact-soft: rgba(47, 18, 91, 0.18);
  --ap-safe-top: env(safe-area-inset-top, 0px);
  --ap-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ap-control: 48px;
  --ap-radius-sm: 14px;
  --ap-radius: 22px;
  --ap-radius-lg: 30px;
  --ap-ease-spring: cubic-bezier(0.22, 1.34, 0.42, 1);
  --ap-ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--ap-purple-base);
}

html.ap-ui *,
html.ap-ui *::before,
html.ap-ui *::after {
  box-sizing: border-box;
}

html.ap-ui body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow: hidden;
  color: var(--ap-ink);
  font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  background:
    radial-gradient(circle at 12% -8%, rgba(255, 255, 255, 0.34) 0 4%, transparent 23%),
    radial-gradient(circle at 98% 88%, rgba(249, 168, 212, 0.52), transparent 34%),
    radial-gradient(circle at 52% 10%, #a78bfa 0, #8b5cf6 34%, #7c3aed 67%, #6d28d9 100%) !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html.ap-ui body::before,
html.ap-ui body::after {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
}

html.ap-ui body::before {
  opacity: 0.36;
  background:
    repeating-conic-gradient(
      from -9deg at 50% 36%,
      rgba(255, 255, 255, 0.08) 0deg 11deg,
      transparent 11deg 23deg
    );
  mask-image: radial-gradient(circle at 50% 38%, #000 0, transparent 68%);
}

html.ap-ui body::after {
  opacity: 0.2;
  background-image:
    radial-gradient(circle at 15% 18%, rgba(255, 255, 255, 0.62) 0 1px, transparent 1.5px),
    radial-gradient(circle at 75% 64%, rgba(255, 255, 255, 0.42) 0 1px, transparent 1.5px);
  background-size: 34px 34px, 46px 46px;
}

/* Phase visibility is authoritative. No component rule below uses display
   !important, so engine-hidden controls cannot be resurrected. */
html.ap-ui .hidden-phase {
  display: none !important;
}

html.ap-ui [hidden] {
  display: none !important;
}

html.ap-ui button,
html.ap-ui input,
html.ap-ui select,
html.ap-ui textarea {
  font: inherit;
}

html.ap-ui button,
html.ap-ui [role="button"],
html.ap-ui a {
  -webkit-tap-highlight-color: transparent;
}

html.ap-ui button {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  touch-action: manipulation;
}

/* The phase 2 tool controls are <div onclick="...">, not <button>, so the rule
   above never reached them and they were left at touch-action:auto. A tap
   target at auto makes the browser hold the click while it works out whether
   the touch is the start of a gesture, which is felt as an occasional delay
   before a tool actually switches. It only happens on real touch hardware,
   which is why it never showed up in headless measurement.
   `manipulation` still allows panning and pinching, so the scrollable palette
   and swatch strips keep working: it only drops the double-tap-zoom wait. */
html.ap-ui .dock-btn,
html.ap-ui .p2-tool-btn,
html.ap-ui #p2-bottom-area [onclick],
html.ap-ui #p2-dock-wrapper [onclick],
html.ap-ui #game-ui [onclick] {
  touch-action: manipulation;
}

html.ap-ui button:focus-visible,
html.ap-ui [role="button"]:focus-visible,
html.ap-ui a:focus-visible,
html.ap-ui input:focus-visible,
html.ap-ui select:focus-visible,
html.ap-ui summary:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(59, 29, 100, 0.52);
}

html.ap-ui h1,
html.ap-ui h2,
html.ap-ui h3,
html.ap-ui p {
  margin-block-start: 0;
}

html.ap-ui .ap-icon {
  width: 1.35em;
  height: 1.35em;
  flex: 0 0 auto;
  overflow: visible;
  vertical-align: -0.24em;
  filter: drop-shadow(0 2px 0 rgba(59, 29, 100, 0.2));
}

html.ap-ui .ap-label,
html.ap-ui .ap-control-label,
html.ap-ui .ap-tool-label,
html.ap-ui .ap-view-label {
  min-width: 0;
  font-weight: 900;
  line-height: 1.05;
}

html.ap-ui .ap-display,
html.ap-ui .ap-display-title,
html.ap-ui .ap-screen-title,
html.ap-ui .ap-celebration-title,
html.ap-ui #menu-header h1,
html.ap-ui #p3-title {
  color: #fff !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-text-stroke: 1.7px var(--ap-plum);
  paint-order: stroke fill;
  text-shadow:
    0 3px 0 var(--ap-plum),
    0 7px 0 rgba(59, 29, 100, 0.24),
    0 11px 18px rgba(42, 17, 82, 0.32) !important;
}

html.ap-ui .ap-screen-title,
html.ap-ui .ap-celebration-title {
  font-size: clamp(24px, 7vw, 38px);
}

html.ap-ui .ap-title-ink,
html.ap-ui .ap-sheet-title,
html.ap-ui .ap-card-title {
  color: var(--ap-plum);
  font-weight: 900;
  letter-spacing: -0.025em;
}

html.ap-ui .ap-supporting,
html.ap-ui .ap-sheet-subtitle,
html.ap-ui .ap-card-copy {
  color: var(--ap-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

html.ap-ui .ap-surface,
html.ap-ui .ap-card,
html.ap-ui .ap-panel,
html.ap-ui .ap-card-object {
  position: relative;
  overflow: visible;
  border: 3px solid var(--ap-white-rim);
  border-radius: var(--ap-radius);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 253, 248, 0.98) 44%, #f1eaff);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.95),
    inset 0 -3px 0 rgba(120, 87, 169, 0.12),
    0 6px 0 #d5c9ee,
    0 14px 24px var(--ap-contact-soft);
}

html.ap-ui .ap-control,
html.ap-ui .ap-mould,
html.ap-ui .ap-primary,
html.ap-ui .ap-secondary,
html.ap-ui .ap-danger,
html.ap-ui .ap-btn,
html.ap-ui .hh-btn,
html.ap-ui #picker-play-btn,
html.ap-ui #modal-btn,
html.ap-ui #modal-double-btn {
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 18px;
  border: 2px solid rgba(76, 29, 149, 0.72);
  border-radius: 18px;
  color: #fff;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  text-decoration: none;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer;
  transform: translateY(0);
  transition:
    transform 110ms ease,
    box-shadow 110ms ease,
    filter 160ms ease;
  background:
    linear-gradient(to bottom, var(--ap-purple-lit), var(--ap-purple) 44%, var(--ap-purple-deep));
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.68),
    inset 0 -2px 0 rgba(55, 18, 104, 0.3),
    0 6px 0 var(--ap-purple-base),
    0 13px 22px rgba(76, 29, 149, 0.34);
}

html.ap-ui .ap-primary,
html.ap-ui .ap-btn-purple,
html.ap-ui .hh-btn,
html.ap-ui #picker-play-btn,
html.ap-ui #modal-btn {
  border-color: rgba(76, 29, 149, 0.82) !important;
  color: #fff !important;
  background:
    linear-gradient(165deg, #d4c8ff 0, var(--ap-purple-lit) 12%, var(--ap-purple) 48%, var(--ap-purple-deep) 100%) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.72),
    inset 0 -2px 0 rgba(55, 18, 104, 0.34),
    0 6px 0 var(--ap-purple-base),
    0 14px 24px rgba(76, 29, 149, 0.4) !important;
}

html.ap-ui .ap-primary.ap-pink,
html.ap-ui .ap-btn-pink {
  border-color: rgba(131, 24, 67, 0.84);
  background:
    linear-gradient(165deg, #ffd0e8 0, var(--ap-pink-lit) 12%, var(--ap-pink) 48%, var(--ap-pink-deep) 100%);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.68),
    inset 0 -2px 0 rgba(100, 15, 50, 0.28),
    0 6px 0 var(--ap-pink-base),
    0 14px 24px rgba(131, 24, 67, 0.34);
}

html.ap-ui .ap-secondary,
html.ap-ui .ap-btn-ghost,
html.ap-ui #modal-double-btn {
  border-color: #d5c9ee !important;
  color: var(--ap-plum) !important;
  background: linear-gradient(to bottom, #fff, #fffdf8 52%, #ede6f8) !important;
  text-shadow: 0 1px 0 #fff;
  box-shadow:
    inset 0 3px 0 #fff,
    inset 0 -2px 0 rgba(91, 61, 131, 0.12),
    0 6px 0 #cbbce5,
    0 12px 20px rgba(59, 29, 100, 0.2) !important;
}

html.ap-ui .ap-danger,
html.ap-ui .ap-btn-red {
  border-color: var(--ap-coral-base) !important;
  color: #fff !important;
  background: linear-gradient(to bottom, #ffb2c2, var(--ap-coral) 45%, #d92f5c) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.66),
    inset 0 -2px 0 rgba(107, 14, 49, 0.28),
    0 6px 0 var(--ap-coral-base),
    0 13px 22px rgba(159, 18, 57, 0.28) !important;
}

html.ap-ui .ap-control:active,
html.ap-ui .ap-mould:active,
html.ap-ui .ap-primary:active,
html.ap-ui .ap-secondary:active,
html.ap-ui .ap-danger:active,
html.ap-ui .ap-btn:active,
html.ap-ui .hh-btn:active,
html.ap-ui #picker-play-btn:active,
html.ap-ui #modal-btn:active,
html.ap-ui #modal-double-btn:active {
  transform: translateY(5px) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.58),
    inset 0 -1px 0 rgba(55, 18, 104, 0.24),
    0 1px 0 var(--ap-purple-base),
    0 7px 12px rgba(59, 29, 100, 0.25) !important;
}

html.ap-ui button:disabled,
html.ap-ui [aria-disabled="true"] {
  cursor: default;
  filter: grayscale(0.25) saturate(0.55);
  opacity: 0.58;
}

html.ap-ui .ap-retired {
  position: absolute !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  border: 0 !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

html.ap-ui .ap-icon-control,
html.ap-ui .ap-icon-mould,
html.ap-ui .hdr-icon,
html.ap-ui .ap-sheet-close,
html.ap-ui .help-x,
html.ap-ui #menu-settings-btn {
  align-items: center;
  justify-content: center;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: 16px !important;
  color: #fff !important;
  cursor: pointer;
  background:
    linear-gradient(to bottom, var(--ap-pink-lit), var(--ap-pink) 44%, var(--ap-pink-deep)) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.58),
    inset 0 -2px 0 rgba(95, 14, 51, 0.26),
    0 5px 0 var(--ap-pink-base),
    0 11px 18px rgba(59, 29, 100, 0.28) !important;
  transition: transform 110ms ease, box-shadow 110ms ease;
}

html.ap-ui .ap-icon-control:active,
html.ap-ui .ap-icon-mould:active,
html.ap-ui .hdr-icon:active,
html.ap-ui .ap-sheet-close:active,
html.ap-ui .help-x:active,
html.ap-ui #menu-settings-btn:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.54),
    0 1px 0 var(--ap-pink-base),
    0 6px 10px rgba(59, 29, 100, 0.24) !important;
}

/* Splash and loading */
html.ap-ui #splash-screen {
  padding:
    max(28px, var(--ap-safe-top))
    24px
    max(28px, var(--ap-safe-bottom));
  color: #fff;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.42), transparent 24%),
    radial-gradient(circle at 90% 78%, rgba(249, 168, 212, 0.64), transparent 32%),
    radial-gradient(circle at 50% 14%, #b6a2ff 0, #8b5cf6 38%, #7c3aed 67%, #6d28d9 100%) !important;
}

html.ap-ui #splash-screen::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.46;
  background:
    repeating-conic-gradient(
      from 4deg at 50% 43%,
      rgba(255, 255, 255, 0.09) 0 10deg,
      transparent 10deg 22deg
    );
  mask-image: radial-gradient(circle, #000, transparent 71%);
}

html.ap-ui #splash-screen > * {
  position: relative;
  z-index: 1;
}

html.ap-ui #splash-screen > img {
  width: clamp(150px, 45vw, 200px) !important;
  height: auto !important;
  filter:
    drop-shadow(0 8px 0 rgba(76, 29, 149, 0.34))
    drop-shadow(0 24px 28px rgba(59, 29, 100, 0.36)) !important;
}

html.ap-ui #splash-screen h1 {
  margin-top: 22px !important;
  color: #fff !important;
  font-size: clamp(36px, 11vw, 48px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.045em !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-text-stroke: 2px var(--ap-plum);
  paint-order: stroke fill;
  text-shadow:
    0 4px 0 var(--ap-plum),
    0 9px 0 rgba(59, 29, 100, 0.2),
    0 14px 22px rgba(42, 17, 82, 0.34) !important;
}

html.ap-ui #splash-screen p,
html.ap-ui .ap-splash-status {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.11em !important;
  text-shadow: 0 2px 0 rgba(59, 29, 100, 0.36);
}

html.ap-ui .ap-splash-pieces {
  position: relative;
  width: 98px;
  height: 48px;
  margin-top: 30px;
}

html.ap-ui #ap-splash-loader {
  position: relative;
  width: 104px;
  height: 50px;
  margin-top: 28px !important;
  gap: 0 !important;
}

html.ap-ui .ap-splash-piece {
  position: absolute;
  top: 8px;
  left: 35px;
  width: 30px;
  height: 30px;
  color: var(--ap-pearl);
  filter:
    drop-shadow(0 4px 0 rgba(76, 29, 149, 0.48))
    drop-shadow(0 8px 10px rgba(59, 29, 100, 0.3));
  animation: ap-piece-assemble 1.5s var(--ap-ease-spring) infinite;
}

html.ap-ui #ap-splash-loader .ap-loader-piece {
  position: absolute;
  top: 8px;
  left: 36px;
  width: 31px;
  height: 31px;
  color: var(--ap-pearl);
  font-size: 31px;
  filter:
    drop-shadow(0 4px 0 rgba(76, 29, 149, 0.48))
    drop-shadow(0 8px 10px rgba(59, 29, 100, 0.3));
  animation: ap-piece-assemble 1.5s var(--ap-ease-spring) infinite;
}

html.ap-ui #ap-splash-loader .ap-loader-one {
  --ap-piece-x: -35px;
  --ap-piece-r: -16deg;
}

html.ap-ui #ap-splash-loader .ap-loader-two {
  --ap-piece-x: 0px;
  --ap-piece-r: 8deg;
  animation-delay: 100ms;
}

html.ap-ui #ap-splash-loader .ap-loader-three {
  --ap-piece-x: 35px;
  --ap-piece-r: 18deg;
  animation-delay: 200ms;
}

html.ap-ui #ap-splash-status {
  min-height: 18px;
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 800;
  text-shadow: 0 2px 0 rgba(59, 29, 100, 0.32);
}

html.ap-ui .ap-splash-piece:nth-child(1) {
  --ap-piece-x: -34px;
  --ap-piece-r: -16deg;
}

html.ap-ui .ap-splash-piece:nth-child(2) {
  --ap-piece-x: 0px;
  --ap-piece-r: 8deg;
  animation-delay: 100ms;
}

html.ap-ui .ap-splash-piece:nth-child(3) {
  --ap-piece-x: 34px;
  --ap-piece-r: 18deg;
  animation-delay: 200ms;
}

html.ap-ui .ap-splash-progress {
  width: min(240px, 70vw);
  height: 17px;
  margin-top: 24px;
  padding: 3px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.74);
  border-radius: 999px;
  background: rgba(59, 29, 100, 0.32);
  box-shadow: inset 0 3px 6px rgba(42, 17, 82, 0.32), 0 7px 12px rgba(42, 17, 82, 0.18);
}

html.ap-ui .ap-splash-progress > span {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fff, #f9a8d4);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.72);
}

/* Shell, Discover, cards, and categories */
html.ap-ui #main-menu {
  isolation: isolate;
  color: var(--ap-ink);
  background:
    radial-gradient(circle at 12% -8%, rgba(255, 255, 255, 0.34), transparent 24%),
    radial-gradient(circle at 96% 80%, rgba(249, 168, 212, 0.54), transparent 34%),
    radial-gradient(circle at 50% 8%, #a78bfa 0, #8b5cf6 38%, #7c3aed 68%, #6d28d9 100%) !important;
}

html.ap-ui #main-menu::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  opacity: 0.25;
  background:
    repeating-conic-gradient(
      from -9deg at 50% 34%,
      rgba(255, 255, 255, 0.08) 0deg 11deg,
      transparent 11deg 23deg
    );
  mask-image: radial-gradient(circle at 50% 36%, #000 0, transparent 72%);
}

html.ap-ui #menu-header {
  width: 100%;
  max-width: 1180px;
  min-height: calc(74px + var(--ap-safe-top));
  margin: 0 auto;
  padding:
    max(14px, var(--ap-safe-top))
    clamp(12px, 3vw, 28px)
    8px !important;
}

html.ap-ui #menu-header h1 {
  font-size: clamp(28px, 8vw, 38px) !important;
  line-height: 1 !important;
}

html.ap-ui #menu-header h1 + div {
  margin-top: 5px !important;
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.09em !important;
  text-shadow: 0 2px 0 rgba(59, 29, 100, 0.32);
}

html.ap-ui #gem-pill {
  position: relative;
  isolation: isolate;
  min-width: 66px;
  min-height: 46px;
  padding: 7px 13px !important;
  border: 3px solid rgba(255, 255, 255, 0.92) !important;
  border-radius: 999px !important;
  color: var(--ap-plum);
  background: linear-gradient(to bottom, #fff, var(--ap-pearl) 52%, #ece4f7) !important;
  box-shadow:
    inset 0 3px 0 #fff,
    inset 0 -2px 0 rgba(91, 61, 131, 0.12),
    0 5px 0 #c6b7df,
    0 11px 18px rgba(59, 29, 100, 0.25) !important;
  transform: translateY(0);
  transition: transform 110ms ease, box-shadow 110ms ease;
}

html.ap-ui #gem-pill::after {
  position: absolute;
  inset: 4px;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  content: "";
  opacity: 0;
  background:
    linear-gradient(
      108deg,
      transparent 0 34%,
      rgba(255, 255, 255, 0.12) 42%,
      rgba(255, 255, 255, 0.92) 50%,
      rgba(255, 255, 255, 0.12) 58%,
      transparent 66% 100%
    );
  background-position: -130px 0;
  background-repeat: no-repeat;
  background-size: 110px 100%;
}

html.ap-ui #gem-pill.ap-gem-changed::after {
  animation: ap-gem-shimmer 820ms ease-out both;
}

@keyframes ap-gem-shimmer {
  0% {
    opacity: 0;
    background-position: -130px 0;
  }
  18% { opacity: 0.82; }
  78% { opacity: 0.62; }
  100% {
    opacity: 0;
    background-position: 190px 0;
  }
}

html.ap-ui #gem-pill:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 3px 0 #fff,
    0 1px 0 #c6b7df,
    0 6px 10px rgba(59, 29, 100, 0.22) !important;
}

html.ap-ui #gem-count {
  color: var(--ap-plum) !important;
  font-size: 16px !important;
  -webkit-text-fill-color: var(--ap-plum) !important;
}

/* The wallet gem uses its existing balance-change event for one brief jewel
   pop. No permanent animation runs across the many gems in cards and lists. */
html.ap-ui #gem-pill > .ap-icon[data-ap-icon="gem"] {
  width: 22px;
  height: 22px;
  color: var(--ap-purple);
  transform-box: fill-box;
  transform-origin: center;
}

html.ap-ui #gem-pill.ap-gem-changed > .ap-icon[data-ap-icon="gem"] {
  animation: ap-gem-reward-pop 720ms cubic-bezier(0.18, 0.9, 0.22, 1.25) both;
}

@keyframes ap-gem-reward-pop {
  0% { transform: scale(1) rotate(0); }
  34% { transform: translateY(-2px) scale(1.18) rotate(-8deg); }
  62% { transform: translateY(-1px) scale(1.07) rotate(5deg); }
  100% { transform: scale(1) rotate(0); }
}

html.ap-ui #category-tabs {
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html.ap-ui #puzzle-library {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto !important;
  padding: 8px 13px calc(108px + var(--ap-safe-bottom)) !important;
  overscroll-behavior: contain;
}

html.ap-ui #category-bar {
  position: static !important;
  width: 100%;
  margin: 4px 0 20px;
  padding: 0 2px 9px !important;
  flex-wrap: wrap;
  align-items: stretch !important;
  gap: 7px !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html.ap-ui .cat-pill {
  flex: 1 1 calc(25% - 6px) !important;
  min-width: 0 !important;
  min-height: 44px;
  padding: 8px 5px !important;
  border: 2px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 15px !important;
  color: var(--ap-plum) !important;
  font-size: clamp(10px, 2.8vw, 12px) !important;
  font-weight: 900 !important;
  line-height: 1.05;
  text-align: center;
  white-space: normal !important;
  background: linear-gradient(to bottom, #fff, #fffdf8 55%, #e9e1f6) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.96),
    inset 0 -2px 0 rgba(86, 54, 126, 0.1),
    0 5px 0 rgba(76, 29, 149, 0.34),
    0 10px 16px rgba(59, 29, 100, 0.2) !important;
  transform: translateY(0);
  transition: transform 110ms ease, box-shadow 110ms ease, color 160ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

html.ap-ui .cat-pill .ap-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

html.ap-ui .cat-pill > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.ap-ui .cat-pill.active {
  color: #fff !important;
  background:
    linear-gradient(to bottom, var(--ap-pink-lit), var(--ap-pink) 48%, var(--ap-pink-deep)) !important;
  text-shadow: 0 2px 0 var(--ap-pink-base);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.62),
    inset 0 -2px 0 rgba(104, 15, 53, 0.28),
    0 5px 0 var(--ap-pink-base),
    0 11px 18px rgba(59, 29, 100, 0.28) !important;
}

html.ap-ui .cat-pill:active {
  transform: translateY(4px) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    0 1px 0 var(--ap-purple-base),
    0 5px 9px rgba(59, 29, 100, 0.2) !important;
}

html.ap-ui #puzzle-grid {
  align-content: start;
  gap: 19px 13px !important;
}

html.ap-ui #home-hero {
  position: relative;
  grid-column: 1 / -1;
  min-height: 152px;
  margin: 8px 2px 14px !important;
  padding: 13px !important;
  overflow: visible !important;
  border: 4px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(145deg, #fff 0, var(--ap-pearl) 46%, #eee5ff 100%) !important;
  box-shadow:
    inset 0 4px 0 rgba(255, 255, 255, 0.98),
    inset 0 -3px 0 rgba(108, 73, 155, 0.12),
    0 8px 0 rgba(76, 29, 149, 0.42),
    0 18px 28px rgba(59, 29, 100, 0.3) !important;
}

html.ap-ui #home-hero::after {
  position: absolute;
  top: -11px;
  right: 18px;
  padding: 5px 13px 6px;
  border: 3px solid #fff;
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 0 var(--ap-pink-base);
  content: "Today";
  background: linear-gradient(to bottom, var(--ap-pink-lit), var(--ap-pink-deep));
  box-shadow: 0 5px 0 var(--ap-pink-base), 0 10px 14px rgba(59, 29, 100, 0.22);
}

html.ap-ui #home-hero[data-mode="continue"]::after {
  content: "Continue";
}

html.ap-ui #home-hero .hh-thumb {
  width: 105px !important;
  height: 105px !important;
  flex-basis: 105px !important;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 19px !important;
  box-shadow:
    inset 0 5px 10px rgba(59, 29, 100, 0.18),
    0 7px 0 #c8b8df,
    0 13px 18px rgba(59, 29, 100, 0.2) !important;
}

html.ap-ui #home-hero .hh-eyebrow {
  margin-bottom: 3px !important;
  color: var(--ap-pink-deep) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html.ap-ui #home-hero .hh-title {
  color: var(--ap-plum) !important;
  font-size: clamp(16px, 4.6vw, 20px) !important;
  font-weight: 900 !important;
}

html.ap-ui #home-hero .hh-sub {
  color: var(--ap-muted) !important;
  font-size: 12px !important;
}

html.ap-ui #home-hero .hh-bar {
  height: 10px !important;
  padding: 2px;
  overflow: hidden;
  border-radius: 999px !important;
  background: #ddd4eb !important;
  box-shadow: inset 0 3px 4px rgba(59, 29, 100, 0.16);
}

html.ap-ui #home-hero .hh-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ap-purple), var(--ap-pink)) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.56);
}

html.ap-ui #home-hero .hh-btn {
  flex: 0 0 auto;
  min-width: 78px;
  padding-inline: 14px !important;
  font-size: 12px !important;
}

html.ap-ui .puzzle-card,
html.ap-ui .my-art-card {
  position: relative;
  min-width: 0;
  margin-bottom: 8px;
  padding: 8px 8px 10px;
  overflow: visible !important;
  contain: none !important;
  content-visibility: visible !important;
  border: 3px solid rgba(255, 255, 255, 0.92) !important;
  border-radius: 23px !important;
  background:
    linear-gradient(145deg, #fff 0, var(--ap-pearl) 54%, #eee6fa 100%) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.98),
    inset 0 -3px 0 rgba(101, 69, 145, 0.1),
    0 7px 0 rgba(76, 29, 149, 0.4),
    0 15px 22px rgba(59, 29, 100, 0.26) !important;
  transform: translateY(0);
  transition: transform 130ms ease, box-shadow 130ms ease !important;
}

html.ap-ui .puzzle-card:active,
html.ap-ui .my-art-card:active {
  transform: translateY(5px) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.98),
    0 2px 0 rgba(76, 29, 149, 0.4),
    0 7px 12px rgba(59, 29, 100, 0.22) !important;
}

html.ap-ui .puzzle-card > canvas,
html.ap-ui .puzzle-card-art,
html.ap-ui .puzzle-card-thumb,
html.ap-ui .puzzle-card-media,
html.ap-ui .my-art-card > canvas,
html.ap-ui .my-art-card-art {
  width: 100%;
  overflow: hidden;
  border: 3px solid #ddd2eb;
  border-radius: 15px !important;
  background: var(--ap-lilac);
  box-shadow:
    inset 0 5px 10px rgba(59, 29, 100, 0.16),
    0 3px 0 rgba(255, 255, 255, 0.9);
}

html.ap-ui .puzzle-card-art,
html.ap-ui .puzzle-card-thumb,
html.ap-ui .puzzle-card-media,
html.ap-ui .my-art-card-art {
  position: relative;
  aspect-ratio: 1;
  display: block;
}

html.ap-ui .puzzle-card > canvas,
html.ap-ui .my-art-card > canvas {
  border-width: 3px !important;
}

html.ap-ui .puzzle-card-info {
  min-height: 64px;
  padding: 10px 5px 3px !important;
}

html.ap-ui .puzzle-card-title,
html.ap-ui .my-art-card-title {
  min-height: 1.25em;
  overflow: hidden;
  color: var(--ap-plum) !important;
  font-size: clamp(13px, 3.8vw, 16px) !important;
  font-weight: 900 !important;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.ap-ui .puzzle-card-status,
html.ap-ui .puzzle-card-sub,
html.ap-ui .my-art-card-status {
  min-height: 1.3em;
  margin-top: 3px;
  overflow: hidden;
  color: var(--ap-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.ap-ui .puzzle-card-badge,
html.ap-ui .puzzle-edge-badge,
html.ap-ui .new-badge,
html.ap-ui .progress-badge,
html.ap-ui .gem-earned-mark {
  position: absolute;
  top: -9px !important;
  right: 9px !important;
  left: auto !important;
  z-index: 4;
  max-width: calc(100% - 16px);
  min-height: 25px;
  padding: 5px 10px !important;
  border: 3px solid #fff !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: 0 2px 0 rgba(59, 29, 100, 0.28);
  white-space: nowrap;
  background: linear-gradient(to bottom, var(--ap-purple-lit), var(--ap-purple-deep)) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    0 4px 0 var(--ap-purple-base),
    0 8px 12px rgba(59, 29, 100, 0.24) !important;
}

html.ap-ui .puzzle-card-badge.locked,
html.ap-ui .puzzle-edge-badge.is-locked,
html.ap-ui .puzzle-card-badge[data-kind="locked"] {
  background: linear-gradient(to bottom, var(--ap-pink-lit), var(--ap-pink-deep)) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    0 4px 0 var(--ap-pink-base),
    0 8px 12px rgba(59, 29, 100, 0.24) !important;
}

html.ap-ui .puzzle-card-badge.reward,
html.ap-ui .puzzle-card-badge[data-kind="reward"] {
  color: #53380a !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  background: linear-gradient(to bottom, #fff4a3, var(--ap-gold)) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.65),
    0 4px 0 #a66c12,
    0 8px 12px rgba(59, 29, 100, 0.2) !important;
}

html.ap-ui #menu-bottom-nav {
  left: 10px !important;
  right: 10px !important;
  bottom: 0 !important;
  width: auto !important;
  height: calc(78px + var(--ap-safe-bottom)) !important;
  padding: 7px 7px calc(7px + var(--ap-safe-bottom)) !important;
  overflow: visible;
  border: 4px solid rgba(255, 255, 255, 0.92) !important;
  border-radius: 27px 27px 0 0 !important;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.98), rgba(249, 244, 255, 0.98)) !important;
  box-shadow:
    inset 0 4px 0 #fff,
    inset 0 -3px 0 rgba(97, 63, 143, 0.12),
    0 7px 0 rgba(76, 29, 149, 0.42),
    0 17px 28px rgba(42, 17, 82, 0.35) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.ap-ui .nav-tab,
html.ap-ui #ap-studio-nav {
  position: relative;
  top: 0;
  flex: 1 1 0;
  min-width: 0;
  min-height: 57px;
  padding: 7px 5px !important;
  border-radius: 18px !important;
  color: var(--ap-muted);
  background: transparent !important;
  transform: none !important;
  transition: top 180ms var(--ap-ease-spring), color 160ms ease, box-shadow 160ms ease;
}

html.ap-ui .nav-tab .nav-icon {
  height: 28px;
  color: var(--ap-muted);
  font-size: 24px !important;
  line-height: 28px;
}

html.ap-ui .nav-tab .nav-icon .ap-icon {
  width: 25px;
  height: 25px;
}

html.ap-ui .nav-tab > .ap-icon,
html.ap-ui #ap-studio-nav > .ap-icon {
  position: relative;
  top: 2px;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  filter: none !important;
  shape-rendering: geometricPrecision;
  transform: none !important;
}

html.ap-ui .nav-tab .nav-label {
  color: inherit !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1;
}

html.ap-ui .nav-tab.active,
html.ap-ui #ap-studio-nav.active {
  z-index: 2;
  top: -13px;
  color: #fff !important;
  background:
    linear-gradient(to bottom, var(--ap-pink-lit), var(--ap-pink) 44%, var(--ap-pink-deep)) !important;
  text-shadow: 0 2px 0 var(--ap-pink-base);
  transform: none !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.64),
    inset 0 -2px 0 rgba(100, 15, 50, 0.26),
    0 6px 0 var(--ap-pink-base),
    0 13px 20px rgba(59, 29, 100, 0.3) !important;
}

html.ap-ui .nav-tab.active .nav-icon,
html.ap-ui .nav-tab.active .nav-label,
html.ap-ui #ap-studio-nav.active .nav-icon,
html.ap-ui #ap-studio-nav.active .nav-label {
  color: #fff !important;
}

/* Difficulty confirmation */
html.ap-ui #difficulty-picker,
html.ap-ui .ap-fixed-backdrop,
html.ap-ui .ap-sheet-backdrop,
html.ap-ui #ap-more-backdrop,
html.ap-ui #ap-wheel-backdrop,
html.ap-ui #ap-style-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1200;
  padding: max(12px, var(--ap-safe-top)) 12px 0;
  /* Dim, not blur. Every open of a sheet promoted a full-screen
     backdrop-filter layer, and that first blur pass lands as a dark flash on a
     phone GPU already busy with shimmer and strokes (the same first-paint cost
     the completion overlay measured at ~97ms). A deeper scrim reads the same
     through a 180ms fade and costs one flat fill. */
  background: rgba(38, 15, 72, 0.78) !important;
}

/* The SHEET fades and slides in over 180-260ms, but its backdrop had no opacity
   and no transition, so the instant it was unhidden the whole screen snapped to
   a dark blur while the panel was still on its way. That single dark frame
   ahead of the sheet is what reads as a black flash when the colour circle
   opens. The class is toggled by apOpenSheet/apCloseSheet rather than inferred
   from a list of body classes, so every sheet gets it and none can be missed. */
html.ap-ui .ap-backdrop-fade {
  opacity: 0;
  transition: opacity 170ms ease;
}

html.ap-ui .ap-backdrop-fade.ap-backdrop-in {
  opacity: 1;
}

html.ap-ui #difficulty-picker {
  justify-content: flex-end !important;
  align-items: center !important;
}

html.ap-ui .ap-sheet,
html.ap-ui .ap-fixed-sheet,
html.ap-ui #ap-more-sheet,
html.ap-ui #ap-wheel-sheet,
html.ap-ui #ap-style-sheet,
html.ap-ui .ap-save-sheet {
  position: relative;
  width: min(100%, 520px);
  max-height: min(88dvh, 780px);
  margin: auto auto 0;
  padding:
    37px
    clamp(16px, 5vw, 26px)
    max(24px, calc(18px + var(--ap-safe-bottom)));
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 5px solid rgba(255, 255, 255, 0.95);
  border-bottom: 0;
  border-radius: 34px 34px 0 0;
  color: var(--ap-ink);
  background:
    radial-gradient(circle at 16% 0, #fff 0, var(--ap-pearl) 42%, #eee6fa 100%);
  box-shadow:
    inset 0 4px 0 #fff,
    inset 0 -4px 0 rgba(98, 62, 146, 0.1),
    0 -8px 0 rgba(221, 210, 244, 0.72),
    0 -22px 54px rgba(42, 17, 82, 0.38);
  /* `backwards`, not `both`: with `both` the finished entrance kept overriding
     the transform used to close, so the panel could not animate out and was
     simply hidden, which reads as a snap. */
  animation: ap-sheet-in 260ms var(--ap-ease-spring) backwards;
}

html.ap-ui .ap-sheet-handle,
html.ap-ui .ap-sheet::before {
  position: absolute;
  top: 13px;
  left: 50%;
  width: 58px;
  height: 7px;
  border-radius: 999px;
  content: "";
  transform: translateX(-50%);
  background: #c7b8dd;
  box-shadow: inset 0 2px 2px rgba(59, 29, 100, 0.14), 0 1px 0 #fff;
}

html.ap-ui .ap-fixed-backdrop {
  z-index: 1600;
}

html.ap-ui .ap-fixed-sheet {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1601;
  transform: translateY(18px);
  opacity: 0;
  transition: transform 200ms var(--ap-ease-spring), opacity 170ms ease;
}

html.ap-ui body.ap-more-open #ap-more-sheet,
html.ap-ui body.ap-wheel-open #ap-wheel-sheet,
html.ap-ui body.ap-help-open #ap-help-sheet {
  opacity: 1;
  transform: translateY(0);
}

html.ap-ui .ap-fixed-sheet-head {
  position: relative;
  min-height: 50px;
  margin-bottom: 16px;
  padding-right: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

html.ap-ui .ap-fixed-sheet-head > div {
  align-items: center;
  gap: 10px;
  display: flex;
}

html.ap-ui .ap-fixed-sheet-head > div > .ap-icon {
  width: 28px;
  height: 28px;
  color: var(--ap-purple-deep);
}

html.ap-ui .ap-fixed-sheet-head h2 {
  margin: 0;
  color: var(--ap-plum);
  font-size: clamp(22px, 6vw, 28px);
  font-weight: 900;
  line-height: 1.08;
}

html.ap-ui .ap-fixed-sheet-head .ap-sheet-close {
  position: absolute;
  top: -6px;
  right: 0;
}

html.ap-ui .ap-fixed-sheet-body > h3,
html.ap-ui .ap-more-context > h3,
html.ap-ui .ap-more-actions > h3,
html.ap-ui #ap-wheel-sheet h3 {
  margin: 17px 0 9px;
  color: var(--ap-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: none;
}

html.ap-ui .ap-sheet-header {
  position: relative;
  min-height: 48px;
  margin-bottom: 16px;
  padding-right: 50px;
}

html.ap-ui .ap-sheet-title {
  margin: 0;
  font-size: clamp(22px, 6vw, 28px);
  line-height: 1.08;
}

html.ap-ui .ap-sheet-subtitle {
  margin: 5px 0 0;
}

html.ap-ui .ap-sheet-close {
  position: absolute;
  top: -6px;
  right: 0;
}

html.ap-ui #picker-preview-wrap {
  width: min(100%, 280px) !important;
  max-height: 25dvh;
  margin: 0 auto;
  padding: 7px;
  overflow: hidden !important;
  border: 3px solid #fff;
  border-radius: 20px !important;
  background: #fff;
  box-shadow:
    inset 0 4px 8px rgba(59, 29, 100, 0.12),
    0 6px 0 #cbbce0,
    0 13px 20px rgba(59, 29, 100, 0.2) !important;
}

html.ap-ui #picker-preview-canvas {
  width: 100%;
  max-height: calc(25dvh - 14px);
  object-fit: contain;
  border-radius: 12px !important;
}

html.ap-ui #picker-reward,
html.ap-ui #picker-tier-label {
  position: static !important;
  transform: none !important;
}

html.ap-ui #picker-reward {
  min-height: 0;
  margin: 8px auto 0;
  padding: 4px 10px !important;
  color: var(--ap-purple-deep) !important;
  font-size: 12px !important;
  background: var(--ap-lilac) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html.ap-ui #picker-tier-label {
  margin: 10px 0 5px;
  color: var(--ap-plum) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html.ap-ui #picker-pieces-row {
  width: 100% !important;
  height: auto !important;
  min-height: 202px;
  padding: 5px 2px 12px !important;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: center !important;
  gap: 14px 8px !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
}

html.ap-ui .piece-opt {
  flex: 1 1 calc(33.333% - 8px) !important;
  min-width: 88px !important;
  max-width: 142px;
  height: 90px !important;
  margin-bottom: 5px;
  padding: 8px 5px;
  overflow: visible;
  border: 3px solid #fff;
  border-radius: 21px !important;
  color: var(--ap-plum);
  background: linear-gradient(to bottom, #fff, #fffdf8 52%, #e8dff5) !important;
  box-shadow:
    inset 0 3px 0 #fff,
    inset 0 -2px 0 rgba(92, 58, 135, 0.12),
    0 6px 0 #c7b7df,
    0 12px 18px rgba(59, 29, 100, 0.17);
  transform: translateY(0) !important;
  transition: transform 120ms ease, box-shadow 120ms ease, color 160ms ease !important;
}

html.ap-ui .piece-opt.selected {
  z-index: 2;
  border-color: #fff;
  color: #fff;
  background:
    linear-gradient(to bottom, var(--ap-purple-lit), var(--ap-purple) 46%, var(--ap-purple-deep)) !important;
  text-shadow: 0 2px 0 var(--ap-purple-base);
  transform: translateY(-5px) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.64),
    inset 0 -2px 0 rgba(55, 18, 104, 0.28),
    0 7px 0 var(--ap-purple-base),
    0 14px 22px rgba(59, 29, 100, 0.28) !important;
}

html.ap-ui .piece-opt:active {
  transform: translateY(4px) !important;
  box-shadow:
    inset 0 2px 0 #fff,
    0 2px 0 #c7b7df,
    0 6px 10px rgba(59, 29, 100, 0.15) !important;
}

html.ap-ui .piece-opt .piece-num,
html.ap-ui .piece-opt .piece-count {
  color: currentColor !important;
  font-size: clamp(23px, 7vw, 31px) !important;
  font-weight: 900 !important;
  line-height: 1;
}

html.ap-ui .piece-opt .piece-label,
html.ap-ui .piece-opt .piece-tier,
html.ap-ui .piece-opt .piece-reward,
html.ap-ui .piece-opt .piece-earned {
  color: currentColor !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.2;
  letter-spacing: 0 !important;
  text-transform: none !important;
  opacity: 0.82 !important;
}

html.ap-ui .piece-opt .piece-reward {
  margin-top: 3px;
  align-items: center;
  justify-content: center;
  gap: 2px;
  display: inline-flex;
}

html.ap-ui .piece-opt .piece-reward .ap-icon {
  width: 11px;
  height: 11px;
}

html.ap-ui .piece-opt .piece-earned,
html.ap-ui .gem-earned-mark {
  top: -8px !important;
  right: -5px !important;
  color: #fff !important;
  background: linear-gradient(to bottom, #77ead8, var(--ap-success)) !important;
  box-shadow: 0 4px 0 #087c5d, 0 8px 11px rgba(59, 29, 100, 0.2) !important;
}

html.ap-ui #picker-play-btn {
  width: 100%;
  max-width: 440px;
  min-height: 64px;
  margin: 6px auto 0;
  padding: 12px 20px !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 20px !important;
  line-height: 1;
  white-space: nowrap;
  display: flex !important;
}

html.ap-ui #picker-play-btn > .ap-icon {
  width: 25px;
  height: 25px;
  margin: 0;
  flex: 0 0 25px;
  display: block;
}

html.ap-ui #picker-play-btn > span {
  line-height: 1;
  display: block;
}

html.ap-ui #difficulty-picker {
  top: auto !important;
  right: auto !important;
  bottom: 0 !important;
  left: 50% !important;
  width: min(100%, 540px) !important;
  height: auto !important;
  max-height: min(91dvh, 780px);
  padding:
    16px
    12px
    max(14px, var(--ap-safe-bottom)) !important;
  overflow-y: auto;
  overflow-x: visible;
  border: 5px solid rgba(255, 255, 255, 0.96);
  border-bottom: 0;
  border-radius: 34px 34px 0 0;
  color: var(--ap-ink);
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 16% 0, #fff 0, var(--ap-pearl) 42%, #eee6fa 100%) !important;
  box-shadow:
    inset 0 4px 0 #fff,
    inset 0 -4px 0 rgba(98, 62, 146, 0.1),
    0 -8px 0 rgba(221, 210, 244, 0.72),
    0 0 0 100vmax rgba(43, 18, 80, 0.58),
    0 -22px 54px rgba(42, 17, 82, 0.38) !important;
  backdrop-filter: none !important;
}

html.ap-ui #difficulty-picker::before {
  width: 58px;
  height: 7px;
  margin: 0 auto 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  content: "";
  background: #c7b8dd;
  box-shadow: inset 0 2px 2px rgba(59, 29, 100, 0.14), 0 1px 0 #fff;
}

html.ap-ui #difficulty-picker > .ap-picker-header {
  width: 100% !important;
  max-width: none !important;
  min-height: 50px;
  padding: 4px 1px 8px !important;
}

html.ap-ui #difficulty-picker > .ap-picker-header .ap-sheet-title {
  color: var(--ap-plum) !important;
  font-size: 24px !important;
  -webkit-text-fill-color: var(--ap-plum) !important;
  -webkit-text-stroke: 0;
  text-shadow: none !important;
}

html.ap-ui #difficulty-picker > div:nth-child(2) {
  flex: 0 1 auto !important;
  width: 100%;
  padding: 0 4px !important;
  gap: 4px !important;
  overflow: visible !important;
}

html.ap-ui #difficulty-picker > div:last-child {
  width: 100%;
  padding: 4px 4px 2px !important;
}

/* Settings and My Art */
html.ap-ui #settings-screen {
  color: var(--ap-ink);
  background:
    radial-gradient(circle at 12% -8%, rgba(255, 255, 255, 0.3), transparent 24%),
    radial-gradient(circle at 90% 90%, rgba(249, 168, 212, 0.48), transparent 32%),
    linear-gradient(165deg, #a78bfa, var(--ap-purple) 42%, var(--ap-purple-deep)) !important;
}

html.ap-ui #settings-screen > div:first-child,
html.ap-ui .my-art-header {
  min-height: calc(70px + var(--ap-safe-top));
  padding:
    max(13px, var(--ap-safe-top))
    14px
    9px !important;
}

html.ap-ui #settings-screen > div:first-child h2,
html.ap-ui .my-art-header h2 {
  color: #fff !important;
  font-size: clamp(24px, 7vw, 30px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em;
  -webkit-text-stroke: 1.5px var(--ap-plum);
  paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--ap-plum), 0 8px 14px rgba(42, 17, 82, 0.3);
}

html.ap-ui #settings-screen > div:nth-child(2) {
  max-width: 620px !important;
  padding: 12px 14px calc(30px + var(--ap-safe-bottom)) !important;
}

html.ap-ui #settings-screen > div:nth-child(2) > div,
html.ap-ui #ap-settings-extra > *,
html.ap-ui .ap-settings-row {
  min-height: 68px;
  margin-bottom: 13px !important;
  padding: 15px !important;
  overflow: visible;
  border: 3px solid rgba(255, 255, 255, 0.92) !important;
  border-radius: 21px !important;
  background: linear-gradient(to bottom, #fff, var(--ap-pearl) 56%, #eee7f8) !important;
  box-shadow:
    inset 0 3px 0 #fff,
    inset 0 -2px 0 rgba(91, 61, 131, 0.1),
    0 6px 0 rgba(76, 29, 149, 0.38),
    0 13px 20px rgba(59, 29, 100, 0.22) !important;
}

html.ap-ui .settings-toggle {
  width: 58px;
  height: 32px;
  border: 3px solid #d5cae6;
  border-radius: 999px !important;
  background: #e7dfef !important;
  box-shadow: inset 0 4px 7px rgba(59, 29, 100, 0.18);
}

html.ap-ui .settings-toggle::before {
  width: 22px !important;
  height: 22px !important;
  left: 2px !important;
  bottom: 2px !important;
  border: 2px solid #fff;
  background: linear-gradient(to bottom, #fff, #eee8f6) !important;
  box-shadow: 0 3px 0 #b9aacd, 0 6px 8px rgba(59, 29, 100, 0.22) !important;
}

html.ap-ui input:checked + .settings-toggle {
  border-color: #0e9a70;
  background: linear-gradient(to bottom, #63ead6, var(--ap-mint) 52%, #16a085) !important;
}

html.ap-ui input:checked + .settings-toggle::before {
  transform: translateX(26px) !important;
}

html.ap-ui #settings-remove-ads,
html.ap-ui #settings-stats {
  visibility: hidden;
  max-height: 0;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 0 !important;
  opacity: 0;
}

html.ap-ui #ap-settings-extra {
  width: 100%;
}

html.ap-ui .my-art-empty {
  width: min(100% - 28px, 460px);
  margin: 10dvh auto 0;
  padding: 28px 22px 25px;
  text-align: center;
  border: 4px solid #fff;
  border-radius: 30px;
  background: linear-gradient(145deg, #fff, var(--ap-pearl) 52%, #eee5fa);
  box-shadow:
    inset 0 4px 0 #fff,
    inset 0 -3px 0 rgba(91, 61, 131, 0.12),
    0 8px 0 rgba(76, 29, 149, 0.42),
    0 18px 28px rgba(59, 29, 100, 0.28);
}

html.ap-ui .my-art-empty-art {
  position: relative;
  width: 172px;
  height: 126px;
  margin: 0 auto 20px;
}

html.ap-ui .my-art-empty-frame {
  position: absolute;
  inset: 4px 18px 12px;
  padding: 12px;
  border: 5px solid #fff;
  border-radius: 11px;
  transform: rotate(-4deg);
  background: linear-gradient(145deg, var(--ap-purple-lit), var(--ap-purple-deep));
  box-shadow:
    inset 0 4px 0 rgba(255, 255, 255, 0.52),
    0 7px 0 var(--ap-purple-base),
    0 15px 20px rgba(59, 29, 100, 0.25);
}

html.ap-ui .my-art-empty-frame::after {
  position: absolute;
  inset: 14px;
  border: 4px solid #e5daf4;
  border-radius: 5px;
  content: "";
  background:
    radial-gradient(circle at 32% 34%, #f9a8d4 0 10%, transparent 11%),
    linear-gradient(145deg, #fff, #f3e8ff);
  box-shadow: inset 0 5px 8px rgba(59, 29, 100, 0.14);
}

html.ap-ui .my-art-empty-brush {
  position: absolute;
  right: 6px;
  bottom: 4px;
  width: 18px;
  height: 92px;
  border: 3px solid #fff;
  border-radius: 999px 999px 8px 8px;
  transform: rotate(33deg);
  background: linear-gradient(to right, #f9a8d4, var(--ap-pink), var(--ap-pink-deep));
  box-shadow: 0 5px 0 var(--ap-pink-base), 0 10px 14px rgba(59, 29, 100, 0.22);
}

html.ap-ui .my-art-empty-brush::before {
  position: absolute;
  top: -25px;
  left: -5px;
  width: 22px;
  height: 31px;
  border-radius: 70% 70% 40% 40%;
  content: "";
  background: linear-gradient(to right, #60351f, #9b5b34);
}

html.ap-ui .my-art-empty-title {
  margin: 0;
  color: var(--ap-plum);
  font-size: 23px;
  font-weight: 900;
}

html.ap-ui .my-art-empty-copy {
  max-width: 330px;
  margin: 7px auto 20px;
  color: var(--ap-muted);
  font-size: 14px;
  line-height: 1.45;
}

html.ap-ui .my-art-empty-action {
  width: 100%;
}

/* Shared game shell and Phase 1 */
html.ap-ui #game-ui {
  isolation: isolate;
  padding-top: var(--ap-safe-top);
  background:
    radial-gradient(circle at 13% -8%, rgba(255, 255, 255, 0.34), transparent 23%),
    radial-gradient(circle at 96% 86%, rgba(249, 168, 212, 0.5), transparent 34%),
    linear-gradient(165deg, #a78bfa 0, var(--ap-purple) 40%, var(--ap-purple-deep) 100%) !important;
}

html.ap-ui #game-ui::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  opacity: 0.26;
  background:
    repeating-conic-gradient(
      from -8deg at 50% 38%,
      rgba(255, 255, 255, 0.08) 0deg 10deg,
      transparent 10deg 22deg
    );
  mask-image: radial-gradient(circle at 50% 38%, #000, transparent 70%);
}

html.ap-ui #game-header {
  width: calc(100% - 16px);
  min-height: 64px !important;
  height: auto !important;
  margin: 7px 8px 8px !important;
  padding: 7px 8px !important;
  overflow: visible;
  border: 3px solid rgba(255, 255, 255, 0.94) !important;
  border-radius: 22px !important;
  color: var(--ap-plum);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.98), rgba(250, 246, 255, 0.98)) !important;
  box-shadow:
    inset 0 3px 0 #fff,
    inset 0 -3px 0 rgba(93, 58, 137, 0.1),
    0 6px 0 rgba(76, 29, 149, 0.42),
    0 13px 22px rgba(42, 17, 82, 0.28) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;
  transform: translateY(0);
  transition: transform 230ms var(--ap-ease-settle), opacity 180ms ease;
}

html.ap-ui #game-header > div {
  min-width: 0;
}

html.ap-ui #game-header .hdr-icon {
  width: 46px;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  border-radius: 15px !important;
  font-size: 0;
}

html.ap-ui #game-header .hdr-icon .ap-icon {
  width: 23px;
  height: 23px;
  font-size: 23px;
}

html.ap-ui #home-btn {
  color: #fff !important;
}

html.ap-ui #header-title {
  flex: 1 1 auto;
  min-width: 62px;
  margin: 0 6px;
  padding: 0 !important;
  overflow: hidden;
  color: var(--ap-plum) !important;
  font-size: clamp(15px, 4.6vw, 21px) !important;
  font-weight: 900 !important;
  line-height: 1.05;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: none !important;
  -webkit-text-fill-color: var(--ap-plum) !important;
  text-shadow: 0 2px 0 #fff !important;
}

html.ap-ui #header-title .ap-title-progress,
html.ap-ui #header-title + .ap-title-progress {
  margin-top: 2px;
  color: var(--ap-muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
}

html.ap-ui #progress-pill {
  min-height: 32px;
  padding: 5px 9px !important;
  border: 2px solid #fff !important;
  border-radius: 999px !important;
  color: var(--ap-purple-deep) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  background: var(--ap-lilac) !important;
  box-shadow: inset 0 3px 5px rgba(59, 29, 100, 0.11), 0 2px 0 #fff !important;
}

html.ap-ui #progress-icon {
  font-size: 0;
}

html.ap-ui #progress-bar-container {
  width: calc(100% - 34px) !important;
  height: 8px !important;
  margin: -3px 17px 7px;
  padding: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(59, 29, 100, 0.28) !important;
  box-shadow: inset 0 3px 5px rgba(42, 17, 82, 0.26);
}

html.ap-ui #progress-bar {
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #fff, var(--ap-pink-lit), var(--ap-pink)) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.66);
}

html.ap-ui #main-area {
  min-height: 0;
  margin: 2px 8px 9px;
  overflow: hidden !important;
  border: 5px solid rgba(255, 255, 255, 0.94);
  border-radius: 28px;
  background:
    radial-gradient(circle at 28% 14%, #fff 0, var(--ap-pearl) 46%, #eee8f8 100%);
  box-shadow:
    inset 0 0 0 3px #e0d5ee,
    inset 0 8px 16px rgba(59, 29, 100, 0.09),
    0 8px 0 rgba(76, 29, 149, 0.38),
    0 17px 28px rgba(42, 17, 82, 0.27);
}

html.ap-ui #puzzle-container-wrapper,
html.ap-ui #p2-workspace {
  border-radius: 20px;
}

html.ap-ui #ref-image-overlay {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

html.ap-ui #ap-p1-actions {
  position: absolute;
  right: 9px;
  bottom: calc(122px + var(--ap-safe-bottom));
  left: 9px;
  z-index: 38;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  pointer-events: none;
  display: grid;
}

html.ap-ui #ap-p1-actions > button,
html.ap-ui #ap-p1-actions > .ap-control {
  width: 100%;
  min-width: 0;
  min-height: 51px;
  padding: 6px 5px;
  pointer-events: auto;
  border: 2px solid #fff !important;
  border-radius: 16px !important;
  color: var(--ap-plum) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  background: linear-gradient(to bottom, #fff, var(--ap-pearl) 54%, #e8dff4) !important;
  box-shadow:
    inset 0 3px 0 #fff,
    inset 0 -2px 0 rgba(91, 61, 131, 0.1),
    0 5px 0 #c2b2d9,
    0 10px 16px rgba(59, 29, 100, 0.21) !important;
}

html.ap-ui #ap-p1-actions > button.active,
html.ap-ui #ap-p1-actions > .ap-control.active {
  color: #fff !important;
  background:
    linear-gradient(to bottom, var(--ap-purple-lit), var(--ap-purple) 48%, var(--ap-purple-deep)) !important;
  text-shadow: 0 2px 0 var(--ap-purple-base);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.62),
    inset 0 -2px 0 rgba(55, 18, 104, 0.28),
    0 5px 0 var(--ap-purple-base),
    0 11px 18px rgba(59, 29, 100, 0.28) !important;
}

html.ap-ui #ap-p1-actions .ap-icon {
  width: 21px;
  height: 21px;
  margin-right: 3px;
}

html.ap-ui #ap-p1-actions .ap-label {
  display: inline-block;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

html.ap-ui #bottom-bar {
  height: 112px !important;
  min-height: 112px;
  margin: 0 8px max(7px, var(--ap-safe-bottom)) !important;
  padding: 9px !important;
  overflow: visible;
  border: 4px solid rgba(255, 255, 255, 0.84) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.96), rgba(239, 231, 250, 0.96)) !important;
  box-shadow:
    inset 0 4px 0 #fff,
    inset 0 -3px 0 rgba(91, 61, 131, 0.13),
    0 7px 0 rgba(76, 29, 149, 0.42),
    0 15px 24px rgba(42, 17, 82, 0.3) !important;
}

html.ap-ui #bottom-bar > div {
  margin: 0 !important;
  overflow: hidden !important;
  border: 3px solid #d8cce8 !important;
  border-radius: 17px !important;
  background:
    linear-gradient(to bottom, #e8def4, #f8f4fc) !important;
  box-shadow:
    inset 0 6px 12px rgba(59, 29, 100, 0.16),
    0 2px 0 rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: none !important;
}

html.ap-ui #jigsaw-tray {
  gap: 7px !important;
  padding: 8px 10px !important;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

html.ap-ui #jigsaw-tray::-webkit-scrollbar {
  display: none;
}

html.ap-ui #jigsaw-tray > * {
  filter:
    drop-shadow(0 4px 0 rgba(59, 29, 100, 0.2))
    drop-shadow(0 8px 7px rgba(59, 29, 100, 0.15));
}

/* Phase 1 blocking milestone */
html.ap-ui #modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1400 !important;
  padding: 18px;
  /* Scrim only. The old 18px blur measured ~97ms for its first full-screen
     pass, and that pass runs on the completion frame itself, under confetti,
     on the season's weakest phones: it IS the white flash players reported at
     the end of assembly. At 0.9 density nothing identifiable survives the
     scrim anyway, so the blur was buying almost nothing and charging for it
     at the worst possible moment. */
  background: rgba(38, 15, 72, 0.9) !important;
  /* The markup asks for a 500ms opacity fade while the card runs its own 420ms
     entrance on a different curve, so the backdrop was still arriving after the
     card had already landed: two separate movements instead of one. The
     backdrop now leads and the card settles into it. */
  /* Fast fade kept from the blur era: with no filter to pay for, the scrim
     just needs to arrive ahead of the card, and 130ms does that without ever
     showing a half-transparent frame of the board behind it. */
  transition: opacity 130ms ease-out !important;
}

html.ap-ui #modal-box {
  /* Matches the backdrop, and gives the closing scale-down something to ease
     along: the markup's 500ms left the card sitting still after the backdrop
     had gone. */
  transition: transform 260ms cubic-bezier(0.34, 0.02, 0.28, 1) !important;
  position: relative;
  width: min(100%, 430px);
  max-width: 430px !important;
  padding: 70px 22px 25px !important;
  overflow: visible;
  border: 5px solid #fff !important;
  border-radius: 31px !important;
  background:
    radial-gradient(circle at 22% 0, #fff, var(--ap-pearl) 50%, #eee4f8) !important;
  box-shadow:
    inset 0 4px 0 #fff,
    inset 0 -4px 0 rgba(91, 61, 131, 0.12),
    0 8px 0 #c5b5df,
    0 22px 44px rgba(42, 17, 82, 0.42) !important;
}

html.ap-ui .ap-celebration-ribbon,
html.ap-ui #modal-box .ap-celebration-ribbon {
  position: absolute;
  top: -20px;
  left: 50%;
  z-index: 3;
  min-width: 230px;
  padding: 12px 24px 14px;
  border: 4px solid #fff;
  border-radius: 13px 13px 18px 18px;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 3px 0 var(--ap-pink-base);
  transform: translateX(-50%) rotate(-1.5deg);
  background: linear-gradient(to bottom, var(--ap-pink-lit), var(--ap-pink) 44%, var(--ap-pink-deep));
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.62),
    0 7px 0 var(--ap-pink-base),
    0 15px 20px rgba(59, 29, 100, 0.3);
  animation: ap-ribbon-settle 560ms var(--ap-ease-spring) both;
}

html.ap-ui .ap-celebration-ribbon::before,
html.ap-ui .ap-celebration-ribbon::after {
  position: absolute;
  top: 10px;
  z-index: -1;
  width: 27px;
  height: 31px;
  content: "";
  background: var(--ap-pink-base);
  clip-path: polygon(0 0, 100% 14%, 78% 50%, 100% 86%, 0 100%);
}

html.ap-ui .ap-celebration-ribbon::before {
  left: -22px;
}

html.ap-ui .ap-celebration-ribbon::after {
  right: -22px;
  transform: scaleX(-1);
}

html.ap-ui #modal-box h2 {
  color: var(--ap-plum) !important;
  font-size: clamp(28px, 8vw, 39px) !important;
  font-weight: 900 !important;
  -webkit-text-fill-color: var(--ap-plum) !important;
  background: none !important;
}

html.ap-ui #modal-box p {
  color: var(--ap-muted) !important;
  font-size: 14px !important;
  line-height: 1.45;
}

html.ap-ui #modal-btn,
html.ap-ui #modal-double-btn {
  width: 100%;
  min-height: 56px;
  font-size: 16px !important;
}

html.ap-ui #modal-btn {
  display: flex !important;
}

html.ap-ui #modal-btn > .ap-icon {
  position: absolute;
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
}

/* Phase 2 painting tray */
html.ap-ui #p2-dock-wrapper,
html.ap-ui #p2-tool-dock,
html.ap-ui #p2-dock-wrapper #dock-settings-panel {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

html.ap-ui #p2-bottom-area {
  right: 7px !important;
  bottom: max(5px, var(--ap-safe-bottom)) !important;
  left: 7px !important;
  width: auto !important;
  max-width: 650px !important;
  margin-inline: auto;
  padding: 8px 7px 9px !important;
  gap: 5px !important;
  overflow: visible;
  border: 4px solid rgba(255, 255, 255, 0.9);
  border-radius: 27px;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.98), rgba(241, 233, 251, 0.98)) !important;
  box-shadow:
    inset 0 4px 0 #fff,
    inset 0 -3px 0 rgba(92, 57, 137, 0.12),
    0 7px 0 rgba(76, 29, 149, 0.44),
    0 16px 26px rgba(42, 17, 82, 0.34) !important;
  transform: translateY(0);
  transition: transform 240ms var(--ap-ease-settle), opacity 180ms ease;
}

html.ap-ui #ap-shades {
  width: 100%;
  min-height: 48px;
  padding: 2px 4px 5px;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, 3vw, 18px);
  pointer-events: auto;
  display: flex;
}

html.ap-ui #ap-shades .ap-shade,
html.ap-ui #ap-shades .ap-shade-btn,
html.ap-ui #ap-shades [data-shade] {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 4px solid rgba(255, 255, 255, 0.96);
  border-radius: 50%;
  color: inherit;
  cursor: pointer;
  background: var(--ap-shade-color, currentColor);
  box-shadow:
    inset 4px 5px 8px rgba(255, 255, 255, 0.42),
    inset -3px -4px 6px rgba(59, 29, 100, 0.2),
    0 5px 0 rgba(59, 29, 100, 0.34),
    0 10px 13px rgba(59, 29, 100, 0.2);
  transform: translateY(0) scale(1);
  transition: transform 150ms var(--ap-ease-spring), box-shadow 120ms ease;
}

html.ap-ui #ap-shades .ap-shade:nth-child(3),
html.ap-ui #ap-shades .ap-shade-btn:nth-child(3),
html.ap-ui #ap-shades [data-shade="0"],
html.ap-ui #ap-shades [aria-current="true"] {
  width: 50px;
  height: 50px;
  flex-basis: 50px;
  border-width: 5px;
  transform: translateY(-4px);
  box-shadow:
    inset 5px 6px 9px rgba(255, 255, 255, 0.45),
    inset -3px -4px 7px rgba(59, 29, 100, 0.22),
    0 7px 0 var(--ap-purple-base),
    0 13px 18px rgba(59, 29, 100, 0.26);
}

html.ap-ui #ap-shades .ap-shade-current {
  color: #fff;
  text-shadow: 0 2px 0 rgba(59, 29, 100, 0.5);
}

html.ap-ui #ap-shades .ap-shade-current .ap-icon {
  width: 22px;
  height: 22px;
  filter:
    drop-shadow(0 1px 0 rgba(59, 29, 100, 0.65))
    drop-shadow(0 3px 4px rgba(59, 29, 100, 0.28));
}

html.ap-ui #ap-shades .ap-shade:active,
html.ap-ui #ap-shades .ap-shade-btn:active,
html.ap-ui #ap-shades [data-shade]:active {
  transform: translateY(4px) scale(0.96);
  box-shadow:
    inset 4px 5px 8px rgba(255, 255, 255, 0.4),
    0 1px 0 rgba(59, 29, 100, 0.34),
    0 5px 8px rgba(59, 29, 100, 0.18);
}

html.ap-ui #p2-new-dock {
  width: 100% !important;
  max-width: none !important;
  min-height: 62px;
  padding: 3px !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 2px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html.ap-ui #p2-new-dock .p2-tool-btn {
  position: relative;
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 44px !important;
  max-width: none !important;
  height: 58px !important;
  min-height: 58px !important;
  padding: 5px 1px 4px !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  overflow: visible;
  border: 2px solid transparent !important;
  border-radius: 14px !important;
  color: var(--ap-muted) !important;
  font-size: 0 !important;
  background: linear-gradient(to bottom, #fff, #f5effb) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.92),
    inset 0 -2px 0 rgba(91, 61, 131, 0.1) !important;
  transform: translateY(0);
  transition:
    transform 180ms var(--ap-ease-spring),
    color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease !important;
}

html.ap-ui #p2-new-dock .p2-tool-btn .ap-icon {
  width: 23px;
  height: 23px;
  font-size: 23px;
  filter: drop-shadow(0 2px 0 rgba(59, 29, 100, 0.2));
}

html.ap-ui #p2-new-dock .p2-tool-btn .ap-tool-label {
  display: block;
  width: 100%;
  overflow: hidden;
  font-size: clamp(8.5px, 2.55vw, 10px);
  line-height: 1;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
}

html.ap-ui #p2-new-dock .p2-tool-btn.active {
  z-index: 3;
  border-color: #fff !important;
  color: #fff !important;
  background:
    linear-gradient(to bottom, var(--ap-pink-lit), var(--ap-pink) 45%, var(--ap-pink-deep)) !important;
  text-shadow: 0 2px 0 var(--ap-pink-base);
  transform: translateY(-10px) scale(1.04);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.64),
    inset 0 -2px 0 rgba(100, 15, 50, 0.28),
    0 6px 0 var(--ap-pink-base),
    0 13px 18px rgba(59, 29, 100, 0.27) !important;
}

html.ap-ui #p2-new-dock .p2-tool-btn:active {
  transform: translateY(3px) scale(0.97);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.54),
    0 1px 0 var(--ap-purple-base),
    0 5px 8px rgba(59, 29, 100, 0.18) !important;
}

html.ap-ui #ap-p2-history {
  align-items: center;
  gap: 5px;
  display: flex;
}

html.ap-ui #ap-p2-history > button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 2px solid #d8cce9;
  border-radius: 14px;
  color: var(--ap-plum);
  background: linear-gradient(to bottom, #fff, #eee7f7);
  box-shadow:
    inset 0 2px 0 #fff,
    0 4px 0 #c5b6dc,
    0 8px 12px rgba(59, 29, 100, 0.18);
  transform: translateY(0);
  transition: transform 110ms ease, box-shadow 110ms ease;
}

html.ap-ui #ap-p2-history > button:active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 0 #fff, 0 1px 0 #c5b6dc, 0 4px 7px rgba(59, 29, 100, 0.15);
}

html.ap-ui #ap-more-btn {
  min-width: 64px;
  padding: 5px 8px;
  flex-direction: column;
  gap: 1px;
  font-size: 10px;
}

html.ap-ui #btn-toggle-3d {
  min-width: 66px;
  min-height: 46px;
  padding: 8px 12px !important;
  border: 2px solid var(--ap-pink-base) !important;
  border-radius: 16px !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  background:
    linear-gradient(to bottom, var(--ap-pink-lit), var(--ap-pink) 46%, var(--ap-pink-deep)) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.62),
    inset 0 -2px 0 rgba(100, 15, 50, 0.28),
    0 5px 0 var(--ap-pink-base),
    0 11px 17px rgba(59, 29, 100, 0.26) !important;
}

html.ap-ui #btn-toggle-3d.ap-pulse,
html.ap-ui #btn-toggle-3d.ap-pulse-strong {
  animation: ap-done-pulse 900ms var(--ap-ease-spring) 2;
}

html.ap-ui body.ap-paint-active #game-header {
  opacity: 0;
  transform: translateY(calc(-100% - var(--ap-safe-top) - 18px));
  pointer-events: none;
}

html.ap-ui body.ap-paint-active #p2-bottom-area {
  opacity: 0;
  transform: translateY(calc(100% + var(--ap-safe-bottom) + 22px));
  pointer-events: none;
}

html.ap-ui .ap-touch-aim,
html.ap-ui .ap-touch-preview,
html.ap-ui #ap-touch-preview {
  position: fixed;
  z-index: 850;
  width: 30px;
  height: 30px;
  border: 3px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  pointer-events: none;
  background: color-mix(in srgb, currentColor 22%, transparent);
  box-shadow:
    0 0 0 2px rgba(59, 29, 100, 0.42),
    0 5px 10px rgba(59, 29, 100, 0.24);
  transform: translate(-50%, -50%);
}

html.ap-ui .ap-touch-aim::after,
html.ap-ui .ap-touch-preview::after,
html.ap-ui #ap-touch-preview::after {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 2px;
  height: 18px;
  content: "";
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), transparent);
}

/* More, styles, color wheel, and gestures */
html.ap-ui #ap-more-sheet,
html.ap-ui #ap-style-sheet {
  max-width: 560px;
}

html.ap-ui .ap-more-grid,
html.ap-ui .ap-more-actions,
html.ap-ui .ap-canvas-actions,
html.ap-ui .ap-style-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

html.ap-ui .ap-more-row,
html.ap-ui .ap-more-action,
html.ap-ui .ap-option-row,
html.ap-ui .ap-setting-row,
html.ap-ui #ap-more-sheet .ap-control,
html.ap-ui #ap-style-sheet .ap-control {
  min-height: 58px;
  padding: 10px 12px;
  border: 3px solid #fff;
  border-radius: 18px;
  color: var(--ap-plum);
  background: linear-gradient(to bottom, #fff, var(--ap-pearl) 54%, #e9e1f5);
  box-shadow:
    inset 0 3px 0 #fff,
    inset 0 -2px 0 rgba(91, 61, 131, 0.1),
    0 5px 0 #c7b8dd,
    0 10px 16px rgba(59, 29, 100, 0.16);
}

html.ap-ui .ap-more-actions > h3 {
  grid-column: 1 / -1;
}

html.ap-ui .ap-more-action {
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  color: var(--ap-plum) !important;
  font-size: 12px;
  font-weight: 900;
  text-align: left;
  display: flex;
}

html.ap-ui .ap-more-action .ap-icon {
  width: 23px;
  height: 23px;
  color: var(--ap-purple-deep);
}

html.ap-ui .ap-more-context > #p2-fill-options,
html.ap-ui .ap-more-context > #p2-tool-settings,
html.ap-ui .ap-more-context > #dock-settings-panel {
  margin-bottom: 10px;
}

html.ap-ui .ap-more-row[aria-pressed="true"],
html.ap-ui .ap-more-row.active,
html.ap-ui .ap-option-row.active {
  color: #fff;
  background:
    linear-gradient(to bottom, var(--ap-purple-lit), var(--ap-purple) 48%, var(--ap-purple-deep));
  text-shadow: 0 2px 0 var(--ap-purple-base);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.6),
    inset 0 -2px 0 rgba(55, 18, 104, 0.28),
    0 5px 0 var(--ap-purple-base),
    0 11px 17px rgba(59, 29, 100, 0.23);
}

html.ap-ui #p2-fill-options,
html.ap-ui .ap-fill-modes {
  width: 100%;
  padding: 0 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: grid;
}

html.ap-ui .p2-fill-mode-btn,
html.ap-ui .ap-fill-mode {
  min-height: 48px;
  padding: 8px;
  border: 2px solid #d7cae8;
  border-radius: 15px;
  color: var(--ap-plum);
  font-size: 12px;
  font-weight: 900;
  background: linear-gradient(to bottom, #fff, #eee7f7);
  box-shadow: inset 0 2px 0 #fff, 0 4px 0 #c8b9de, 0 8px 12px rgba(59, 29, 100, 0.15);
}

html.ap-ui .p2-fill-mode-btn.active,
html.ap-ui .ap-fill-mode.active {
  border-color: #fff;
  color: #fff;
  background: linear-gradient(to bottom, var(--ap-purple-lit), var(--ap-purple-deep));
  text-shadow: 0 2px 0 var(--ap-purple-base);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.6),
    0 5px 0 var(--ap-purple-base),
    0 10px 15px rgba(59, 29, 100, 0.22);
}

html.ap-ui #p2-tool-settings,
html.ap-ui .ap-tool-settings {
  width: 100%;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.ap-ui .p2-h-slider,
html.ap-ui .ap-slider,
html.ap-ui input[type="range"] {
  height: 34px;
  accent-color: var(--ap-purple);
}

html.ap-ui .p2-h-slider::-webkit-slider-runnable-track,
html.ap-ui .ap-slider::-webkit-slider-runnable-track {
  height: 12px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: linear-gradient(to right, var(--ap-purple-lit), var(--ap-purple), var(--ap-pink));
  box-shadow: inset 0 3px 4px rgba(59, 29, 100, 0.2), 0 2px 0 #d3c6e6;
}

html.ap-ui .p2-h-slider::-webkit-slider-thumb,
html.ap-ui .ap-slider::-webkit-slider-thumb {
  width: 28px;
  height: 28px;
  margin-top: -10px;
  border: 4px solid #fff;
  border-radius: 50%;
  appearance: none;
  background: linear-gradient(to bottom, var(--ap-pink-lit), var(--ap-pink-deep));
  box-shadow: 0 4px 0 var(--ap-pink-base), 0 8px 12px rgba(59, 29, 100, 0.24);
}

html.ap-ui #ap-wheel-sheet {
  max-width: 500px;
}

html.ap-ui .ap-wheel-stage,
html.ap-ui .ap-color-wheel-wrap,
html.ap-ui .ap-wheel-wrap {
  position: relative;
  width: min(75vw, 310px);
  aspect-ratio: 1;
  margin: 3px auto 18px;
  padding: 8px;
  border: 5px solid #fff;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    inset 0 5px 10px rgba(59, 29, 100, 0.12),
    0 7px 0 #c8b9de,
    0 15px 22px rgba(59, 29, 100, 0.26);
}

html.ap-ui #ap-color-wheel,
html.ap-ui #ap-wheel-canvas,
html.ap-ui .ap-color-wheel,
html.ap-ui .ap-wheel-stage canvas {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  touch-action: none;
  cursor: crosshair;
  box-shadow: inset 0 0 18px rgba(59, 29, 100, 0.18);
}

html.ap-ui .ap-wheel-cursor {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 4px solid #fff;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--ap-plum), 0 6px 10px rgba(59, 29, 100, 0.26);
  transform: translate(-50%, -50%);
}

html.ap-ui .ap-wheel-lightness {
  width: 100%;
  margin: 0 0 16px;
}

html.ap-ui #ap-wheel-preview {
  position: absolute;
  right: 9px;
  bottom: 9px;
  min-width: 68px;
  min-height: 34px;
  padding: 7px 9px;
  border: 3px solid #fff;
  border-radius: 12px;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 2px 0 rgba(59, 29, 100, 0.45);
  background: var(--ap-wheel-preview, var(--ap-purple));
  box-shadow: 0 4px 0 var(--ap-purple-base), 0 8px 12px rgba(59, 29, 100, 0.22);
}

html.ap-ui .ap-wheel-light {
  margin: 0 0 16px;
  color: var(--ap-plum);
  font-size: 12px;
  font-weight: 900;
}

html.ap-ui .ap-wheel-light > span {
  display: block;
  margin-bottom: 5px;
}

html.ap-ui #ap-wheel-lightness {
  width: 100%;
}

html.ap-ui .ap-wheel-presets,
html.ap-ui #ap-wheel-presets,
html.ap-ui .ap-recent-colors,
html.ap-ui .ap-puzzle-colors {
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  display: flex;
}

html.ap-ui .ap-wheel-presets button,
html.ap-ui #ap-wheel-presets button,
html.ap-ui .ap-recent-colors button,
html.ap-ui .ap-puzzle-colors button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--ap-color, currentColor);
  box-shadow:
    inset 4px 5px 7px rgba(255, 255, 255, 0.38),
    inset -3px -4px 6px rgba(59, 29, 100, 0.2),
    0 5px 0 rgba(59, 29, 100, 0.34),
    0 9px 12px rgba(59, 29, 100, 0.18);
}

html.ap-ui .ap-gestures-card,
html.ap-ui #ap-gestures {
  width: min(100%, 500px);
}

html.ap-ui .ap-gesture-row {
  min-height: 59px;
  padding: 9px 5px;
  align-items: center;
  gap: 12px;
  border-bottom: 2px solid #e9e0f3;
  display: flex;
}

html.ap-ui .ap-gesture-row:last-child {
  border-bottom: 0;
}

html.ap-ui .ap-gesture-icon {
  width: 44px;
  min-width: 44px;
  height: 44px;
  border: 2px solid #fff;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(to bottom, var(--ap-purple-lit), var(--ap-purple-deep));
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.58),
    0 4px 0 var(--ap-purple-base),
    0 8px 12px rgba(59, 29, 100, 0.2);
}

html.ap-ui .ap-gesture-copy {
  min-width: 0;
}

html.ap-ui .ap-gesture-copy strong {
  display: block;
  color: var(--ap-plum);
  font-size: 14px;
  font-weight: 900;
}

html.ap-ui .ap-gesture-copy span {
  display: block;
  margin-top: 2px;
  color: var(--ap-muted);
  font-size: 12px;
  line-height: 1.35;
}

/* Phase 3 bright gallery and nested bevel frame */
html.ap-ui #p3-screen,
html.ap-ui .ap-gallery-screen {
  isolation: isolate;
  overflow: hidden;
  color: var(--ap-ink);
  background:
    radial-gradient(circle at 14% -8%, rgba(255, 255, 255, 0.48), transparent 26%),
    radial-gradient(circle at 90% 76%, rgba(249, 168, 212, 0.58), transparent 34%),
    linear-gradient(165deg, #b9a8ff 0, var(--ap-purple) 40%, var(--ap-purple-deep) 100%) !important;
}

html.ap-ui #p3-screen::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  opacity: 0.42;
  background:
    linear-gradient(90deg, transparent 0 16%, rgba(255, 255, 255, 0.12) 16.2% 16.8%, transparent 17% 83%, rgba(255, 255, 255, 0.12) 83.2% 83.8%, transparent 84%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 46%);
}

html.ap-ui #p3-screen::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  height: 26%;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(76, 29, 149, 0.19)),
    repeating-linear-gradient(90deg, transparent 0 96px, rgba(255, 255, 255, 0.12) 96px 98px);
  border-top: 3px solid rgba(255, 255, 255, 0.28);
  transform: perspective(500px) rotateX(4deg);
  transform-origin: bottom;
}

html.ap-ui #ap-p3-nav {
  min-height: 116px;
  padding:
    max(9px, var(--ap-safe-top))
    9px
    8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html.ap-ui #ap-p3-nav > div:first-child {
  order: 2;
  width: 100%;
  align-items: center;
  gap: 6px !important;
  display: flex;
}

html.ap-ui #ap-p3-nav > div:first-child > button {
  flex: 1 1 0;
}

html.ap-ui #ap-p3-nav .p3-title-area {
  order: 1;
  width: 100%;
  color: #fff !important;
  font-weight: 900 !important;
}

html.ap-ui #ap-p3-nav > div:last-child {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

html.ap-ui #p3-title {
  width: min(100%, 280px);
  margin-inline: auto;
  overflow: hidden;
  font-size: clamp(20px, 6vw, 28px) !important;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.ap-ui #ap-p3-nav .p3-title-area > span {
  margin-top: 4px !important;
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 0 rgba(59, 29, 100, 0.28);
}

html.ap-ui #ap-p3-nav .p3-action-btn {
  width: 100%;
  min-width: 0 !important;
  min-height: 47px !important;
  padding: 6px 5px !important;
  align-items: center;
  justify-content: center;
  gap: 4px !important;
  border: 2px solid #fff !important;
  border-radius: 15px !important;
  color: var(--ap-plum) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  background: linear-gradient(to bottom, #fff, var(--ap-pearl) 54%, #e8dff4) !important;
  box-shadow:
    inset 0 3px 0 #fff,
    inset 0 -2px 0 rgba(91, 61, 131, 0.1),
    0 5px 0 rgba(76, 29, 149, 0.4),
    0 10px 16px rgba(59, 29, 100, 0.22) !important;
  transform: translateY(0);
  transition: transform 110ms ease, box-shadow 110ms ease;
}

html.ap-ui #ap-p3-nav .p3-action-btn:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 3px 0 #fff,
    0 1px 0 rgba(76, 29, 149, 0.4),
    0 5px 9px rgba(59, 29, 100, 0.18) !important;
}

html.ap-ui #ap-p3-nav .p3-action-btn .ap-icon,
html.ap-ui #ap-p3-nav .p3-action-btn .ap-view-icon {
  width: 20px;
  height: 20px;
}

html.ap-ui #ap-p3-nav .p3-btn-label,
html.ap-ui #ap-p3-nav .ap-view-label {
  display: inline;
  min-width: 0;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.ap-ui #p3-outline-toggle {
  color: #fff !important;
  background:
    linear-gradient(to bottom, var(--ap-purple-lit), var(--ap-purple) 48%, var(--ap-purple-deep)) !important;
  text-shadow: 0 2px 0 var(--ap-purple-base);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.62),
    inset 0 -2px 0 rgba(55, 18, 104, 0.28),
    0 5px 0 var(--ap-purple-base),
    0 11px 17px rgba(59, 29, 100, 0.25) !important;
}

html.ap-ui #p3-scene {
  padding:
    calc(120px + var(--ap-safe-top))
    15px
    calc(144px + var(--ap-safe-bottom)) !important;
  background:
    radial-gradient(ellipse at 50% 17%, rgba(255, 255, 255, 0.5), transparent 33%),
    radial-gradient(ellipse at 50% 48%, rgba(255, 255, 255, 0.17), transparent 58%) !important;
}

html.ap-ui #p3-scene .p3-entrance {
  max-width: 88vw;
  max-height: calc(100dvh - 286px);
}

html.ap-ui #p3-artwork-wrapper {
  filter: drop-shadow(0 24px 26px rgba(42, 17, 82, 0.36));
}

html.ap-ui #p3-artwork-wrapper::after {
  position: absolute;
  right: 8%;
  bottom: -12%;
  left: 8%;
  z-index: -2;
  height: 18%;
  border-radius: 50%;
  pointer-events: none;
  content: "";
  background: rgba(42, 17, 82, 0.3);
  filter: blur(15px);
  transform: translateZ(-60px);
}

html.ap-ui #p3-screen .p3-frame {
  position: relative !important;
  padding: clamp(14px, 4vw, 24px) !important;
  border: clamp(5px, 1.5vw, 9px) solid rgba(255, 255, 255, 0.92) !important;
  border-radius: 13px !important;
  background:
    linear-gradient(
      145deg,
      #f0e9ff 0,
      var(--ap-purple-lit) 15%,
      var(--ap-purple) 42%,
      var(--ap-pink) 75%,
      var(--ap-pink-deep) 100%
    ) !important;
  box-shadow:
    inset 0 7px 0 rgba(255, 255, 255, 0.48),
    inset 0 -8px 12px rgba(76, 29, 149, 0.34),
    0 10px 0 var(--ap-purple-base),
    0 28px 46px var(--ap-gallery-shadow, rgba(42, 17, 82, 0.48)) !important;
}

html.ap-ui #ap-p3-mat {
  position: relative;
  padding: clamp(14px, 5vw, 34px);
  border: 4px solid rgba(255, 255, 255, 0.94);
  border-radius: 7px;
  background:
    linear-gradient(145deg, #fff, var(--ap-gallery-mat, var(--ap-pearl)) 55%, #e8dfef);
  box-shadow:
    inset 0 9px 16px rgba(59, 29, 100, 0.2),
    inset 0 -3px 0 rgba(255, 255, 255, 0.86),
    0 4px 8px rgba(59, 29, 100, 0.2);
}

html.ap-ui #p3-screen .p3-frame::before {
  position: absolute;
  inset: 9px;
  z-index: -1;
  border-radius: 7px;
  pointer-events: none;
  content: "";
  background: var(--ap-gallery-mat, var(--ap-pearl));
  box-shadow: inset 0 8px 14px rgba(59, 29, 100, 0.18);
}

html.ap-ui #p3-display-canvas {
  max-width: min(68vw, 620px) !important;
  max-height: min(45dvh, 600px) !important;
  border-radius: 3px !important;
  background: #fff !important;
  box-shadow:
    0 7px 14px rgba(59, 29, 100, 0.28),
    inset 0 2px 6px rgba(59, 29, 100, 0.08) !important;
}

html.ap-ui #ap-p3-glare {
  position: absolute;
  inset: clamp(14px, 5vw, 34px) !important;
  border-radius: 3px !important;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.7 !important;
  background:
    radial-gradient(
      circle at var(--glare-x, 35%) var(--glare-y, 25%),
      rgba(255, 255, 255, 0.94) 0,
      rgba(255, 255, 255, 0.18) 24%,
      transparent 58%
    ) !important;
}

html.ap-ui #ap-p3-actions {
  position: absolute;
  right: 9px;
  bottom: max(8px, var(--ap-safe-bottom));
  left: 9px;
  z-index: 111;
  padding: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  border: 4px solid rgba(255, 255, 255, 0.92);
  border-radius: 25px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.98), rgba(244, 237, 252, 0.98));
  box-shadow:
    inset 0 4px 0 #fff,
    inset 0 -3px 0 rgba(91, 61, 131, 0.1),
    0 7px 0 rgba(76, 29, 149, 0.42),
    0 16px 25px rgba(42, 17, 82, 0.32);
  display: grid;
}

html.ap-ui #ap-p3-actions > button {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 8px 9px !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px solid #d5c8e6 !important;
  border-radius: 15px !important;
  color: var(--ap-plum) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  background: linear-gradient(to bottom, #fff, var(--ap-pearl) 54%, #e8dff4) !important;
  box-shadow:
    inset 0 3px 0 #fff,
    inset 0 -2px 0 rgba(91, 61, 131, 0.1),
    0 5px 0 #c3b4da,
    0 10px 15px rgba(59, 29, 100, 0.19) !important;
  transform: none !important;
}

html.ap-ui #ap-p3-actions > button:active {
  transform: translateY(4px) !important;
  box-shadow:
    inset 0 2px 0 #fff,
    0 1px 0 #c3b4da,
    0 5px 8px rgba(59, 29, 100, 0.16) !important;
}

html.ap-ui #ap-p3-actions #p3-next-btn {
  grid-column: 1 / -1;
  min-height: 54px;
  border-color: var(--ap-purple-base) !important;
  color: #fff !important;
  font-size: 14px !important;
  background:
    linear-gradient(165deg, #d4c8ff 0, var(--ap-purple-lit) 12%, var(--ap-purple) 48%, var(--ap-purple-deep) 100%) !important;
  text-shadow: 0 2px 0 var(--ap-purple-base);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.7),
    inset 0 -2px 0 rgba(55, 18, 104, 0.32),
    0 6px 0 var(--ap-purple-base),
    0 13px 21px rgba(59, 29, 100, 0.3) !important;
}

html.ap-ui #ap-p3-celebration {
  position: absolute;
  top: calc(118px + var(--ap-safe-top));
  left: 50%;
  z-index: 114;
  width: min(90vw, 330px);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -18px) scale(0.84) rotate(-2deg);
  transition: opacity 220ms ease, transform 520ms var(--ap-ease-spring);
}

html.ap-ui #ap-p3-celebration.is-visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1) rotate(-1deg);
}

html.ap-ui #ap-p3-celebration .ap-celebration-ribbon {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  min-width: 0;
  padding: 10px 18px 12px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transform: none;
  display: flex;
}

html.ap-ui #ap-p3-celebration .ap-celebration-ribbon .ap-icon {
  width: 24px;
  height: 24px;
}

html.ap-ui .ap-share-preparing {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1800;
  min-width: 190px;
  min-height: 54px;
  padding: 12px 18px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 3px solid #fff;
  border-radius: 18px;
  color: var(--ap-plum);
  font-size: 13px;
  font-weight: 900;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -42%) scale(0.92);
  background: linear-gradient(to bottom, #fff, var(--ap-pearl) 54%, #e8dff4);
  box-shadow:
    inset 0 3px 0 #fff,
    0 6px 0 #c5b5dc,
    0 18px 32px rgba(42, 17, 82, 0.36);
  transition: opacity 160ms ease, transform 220ms var(--ap-ease-spring);
  display: flex;
}

html.ap-ui .ap-share-preparing.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Save sheet */
html.ap-ui #p3-download-modal {
  z-index: 1700 !important;
  padding: 0 !important;
  align-items: flex-end !important;
  /* Dim, not blur: this element lives in the DOM full-screen over the
     artwork, and once its first open promoted it to a compositing layer the
     blur kept being paid for on EVERY frame the artwork moved underneath,
     invisible or not. That is the "phase 3 flashes after Save" bug. */
  background: rgba(38, 15, 72, 0.78) !important;
}

html.ap-ui #p3-modal-content {
  width: min(100%, 540px) !important;
  max-width: 540px !important;
  max-height: 91dvh !important;
  overflow: visible !important;
  border-radius: 34px 34px 0 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.ap-ui .ap-save-sheet {
  width: 100%;
  max-height: 91dvh;
  margin: 0;
  padding:
    37px
    clamp(16px, 5vw, 26px)
    max(24px, calc(18px + var(--ap-safe-bottom)));
  overflow-y: auto;
}

html.ap-ui .ap-save-sheet .ap-sheet-header {
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-right: 0;
  display: flex;
}

html.ap-ui .ap-save-sheet .ap-sheet-header > div {
  min-width: 0;
}

html.ap-ui .ap-save-sheet .ap-sheet-close {
  position: static;
  width: auto;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0 10px;
  gap: 5px;
  flex: 0 0 auto;
  font-size: 10px;
}

html.ap-ui .ap-save-facts {
  margin: 14px 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  display: grid;
}

html.ap-ui .ap-save-fact {
  min-width: 0;
  min-height: 76px;
  padding: 11px;
  border: 3px solid #fff;
  border-radius: 17px;
  background: linear-gradient(to bottom, #fff, #eee7f7);
  box-shadow:
    inset 0 3px 0 #fff,
    inset 0 -2px 0 rgba(91, 61, 131, 0.09),
    0 5px 0 #c9bade,
    0 10px 15px rgba(59, 29, 100, 0.15);
}

html.ap-ui .ap-save-fact-label {
  display: block;
  color: var(--ap-muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

html.ap-ui .ap-save-fact-value {
  display: block;
  margin-top: 5px;
  color: var(--ap-plum);
  font-size: clamp(13px, 3.8vw, 16px);
  font-weight: 900;
  line-height: 1.2;
}

html.ap-ui .ap-save-primary,
html.ap-ui .ap-save-museum,
html.ap-ui .ap-save-upsell {
  width: 100%;
  min-height: 58px;
  margin-top: 10px;
  padding: 10px 13px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px solid var(--ap-purple-base);
  border-radius: 18px;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  text-align: left;
  background:
    linear-gradient(to bottom, var(--ap-purple-lit), var(--ap-purple) 48%, var(--ap-purple-deep));
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.66),
    inset 0 -2px 0 rgba(55, 18, 104, 0.3),
    0 6px 0 var(--ap-purple-base),
    0 13px 21px rgba(59, 29, 100, 0.28);
  display: flex;
}

html.ap-ui .ap-save-museum,
html.ap-ui .ap-save-upsell {
  border-color: #fff;
  color: var(--ap-plum);
  background:
    linear-gradient(145deg, #fff, #faeff9 48%, #e9def6);
  box-shadow:
    inset 0 3px 0 #fff,
    inset 0 -2px 0 rgba(91, 61, 131, 0.1),
    0 6px 0 #c8b7dd,
    0 13px 20px rgba(59, 29, 100, 0.2);
}

html.ap-ui .ap-save-primary:active,
html.ap-ui .ap-save-museum:active,
html.ap-ui .ap-save-upsell:active {
  transform: translateY(5px);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.58),
    0 1px 0 var(--ap-purple-base),
    0 6px 10px rgba(59, 29, 100, 0.2);
}

html.ap-ui .ap-save-museum span,
html.ap-ui .ap-save-upsell-copy {
  flex: 1 1 auto;
  min-width: 0;
}

html.ap-ui .ap-save-museum strong,
html.ap-ui .ap-save-upsell strong {
  display: block;
  color: var(--ap-plum);
  font-size: 14px;
  font-weight: 900;
}

html.ap-ui .ap-save-museum small,
html.ap-ui .ap-save-upsell small {
  display: block;
  margin-top: 2px;
  color: var(--ap-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

html.ap-ui .ap-save-upsell-price {
  flex: 0 0 auto;
  padding: 6px 8px;
  border-radius: 10px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  background: linear-gradient(to bottom, var(--ap-pink-lit), var(--ap-pink-deep));
  box-shadow: 0 3px 0 var(--ap-pink-base);
}

html.ap-ui .ap-save-note,
html.ap-ui .ap-save-status {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 2px solid #d9cdeb;
  border-radius: 14px;
  color: var(--ap-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  background: #f5effb;
}

html.ap-ui .ap-save-status[data-kind="error"],
html.ap-ui .ap-save-status[data-kind="update"] {
  border-color: #f7a3b7;
  color: #8b153b;
  background: #fff0f4;
}

html.ap-ui .ap-save-status[data-kind="success"] {
  border-color: #86dbc3;
  color: #087c5d;
  background: #ecfff8;
}

html.ap-ui .ap-print-tips {
  margin-top: 13px;
  border-top: 2px solid #e4daef;
}

html.ap-ui .ap-print-tips summary {
  min-height: 46px;
  padding: 10px 2px;
  align-items: center;
  gap: 7px;
  color: var(--ap-plum);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
}

html.ap-ui .ap-print-tips p {
  margin: 0 0 5px;
  padding: 0 2px;
  color: var(--ap-muted);
  font-size: 11px;
  line-height: 1.45;
}

/* Studio */
html.ap-ui #ap-shop,
html.ap-ui .ap-studio-sheet {
  color: var(--ap-ink);
  background:
    radial-gradient(circle at 12% -8%, rgba(255, 255, 255, 0.36), transparent 24%),
    radial-gradient(circle at 94% 82%, rgba(249, 168, 212, 0.54), transparent 34%),
    linear-gradient(165deg, #a78bfa 0, var(--ap-purple) 42%, var(--ap-purple-deep) 100%) !important;
}

html.ap-ui #ap-shop::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  opacity: 0.24;
  background:
    repeating-conic-gradient(
      from -8deg at 50% 34%,
      rgba(255, 255, 255, 0.08) 0deg 10deg,
      transparent 10deg 22deg
    );
  mask-image: radial-gradient(circle at 50% 36%, #000, transparent 72%);
}

html.ap-ui #ap-shop .shop-wrap {
  width: 100%;
  max-width: 650px !important;
  padding:
    max(14px, var(--ap-safe-top))
    14px
    calc(36px + var(--ap-safe-bottom)) !important;
}

html.ap-ui #ap-shop .shop-close {
  z-index: 8;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px;
  min-height: 48px;
  margin-right: 0;
  padding: 0;
  font-size: 0 !important;
}

html.ap-ui #ap-shop h2 {
  margin: 2px 0 7px !important;
  color: #fff !important;
  font-size: clamp(29px, 9vw, 40px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  -webkit-text-stroke: 1.8px var(--ap-plum);
  paint-order: stroke fill;
  text-shadow:
    0 4px 0 var(--ap-plum),
    0 8px 0 rgba(59, 29, 100, 0.22),
    0 13px 20px rgba(42, 17, 82, 0.32) !important;
}

html.ap-ui #ap-shop .shop-sub {
  max-width: 510px;
  margin: 0 auto 20px !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  text-shadow: 0 2px 0 rgba(59, 29, 100, 0.3);
}

html.ap-ui #ap-shop .shop-card,
html.ap-ui #ap-shop .shop-hero {
  position: relative;
  margin-bottom: 16px !important;
  padding: 17px !important;
  overflow: visible;
  border: 4px solid rgba(255, 255, 255, 0.94) !important;
  border-radius: 25px !important;
  background:
    linear-gradient(145deg, #fff 0, var(--ap-pearl) 54%, #eee5f8 100%) !important;
  box-shadow:
    inset 0 4px 0 #fff,
    inset 0 -3px 0 rgba(91, 61, 131, 0.11),
    0 7px 0 rgba(76, 29, 149, 0.42),
    0 16px 24px rgba(42, 17, 82, 0.28) !important;
}

html.ap-ui #ap-shop .shop-card.best {
  margin-top: 23px;
  border-color: #fff !important;
  background:
    radial-gradient(circle at 0 0, rgba(196, 181, 253, 0.55), transparent 34%),
    linear-gradient(145deg, #fff, #fdf1fb 54%, #e7dcf7) !important;
  box-shadow:
    inset 0 4px 0 #fff,
    inset 0 -3px 0 rgba(91, 61, 131, 0.12),
    0 8px 0 var(--ap-purple-base),
    0 18px 28px rgba(42, 17, 82, 0.34) !important;
}

html.ap-ui #ap-shop .shop-ribbon {
  top: -17px !important;
  min-height: 31px;
  padding: 7px 18px 8px !important;
  border: 3px solid #fff;
  border-radius: 999px !important;
  color: #fff;
  font-size: 11px !important;
  letter-spacing: 0 !important;
  text-transform: none;
  text-shadow: 0 2px 0 var(--ap-pink-base);
  background:
    linear-gradient(to bottom, var(--ap-pink-lit), var(--ap-pink) 48%, var(--ap-pink-deep)) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.58),
    0 5px 0 var(--ap-pink-base),
    0 10px 15px rgba(59, 29, 100, 0.24) !important;
}

html.ap-ui #ap-shop .shop-wallet {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px 12px;
  display: grid;
}

html.ap-ui #ap-shop .shop-wallet > span:first-child {
  width: 55px;
  height: 55px;
  border: 3px solid #fff;
  border-radius: 18px;
  color: #fff;
  background:
    linear-gradient(145deg, var(--ap-purple-lit), var(--ap-purple) 50%, var(--ap-pink));
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.6),
    0 5px 0 var(--ap-purple-base),
    0 10px 14px rgba(59, 29, 100, 0.22);
  display: grid;
  place-items: center;
}

html.ap-ui #ap-shop .shop-wallet > span:first-child .ap-icon {
  width: 30px;
  height: 30px;
}

html.ap-ui #ap-shop .shop-wallet strong {
  display: block;
  color: var(--ap-plum);
  font-size: 22px;
  font-weight: 900;
}

html.ap-ui #ap-shop .shop-wallet small {
  display: block;
  color: var(--ap-muted);
  font-size: 11px;
  font-weight: 700;
}

html.ap-ui #ap-shop .shop-hint-note {
  grid-column: 1 / -1;
  min-height: 48px;
  margin-top: 5px;
  padding: 9px 11px;
  align-items: center;
  gap: 9px;
  border: 2px solid #dfd4ed;
  border-radius: 15px;
  color: var(--ap-muted);
  font-size: 12px;
  line-height: 1.35;
  background: #f5effb;
  display: flex;
}

html.ap-ui #ap-shop .shop-hint-note .ap-icon {
  color: var(--ap-purple-deep);
}

html.ap-ui #ap-shop .shop-head {
  align-items: flex-start !important;
  margin-bottom: 7px !important;
}

html.ap-ui #ap-shop .shop-name {
  align-items: center;
  gap: 7px;
  color: var(--ap-plum) !important;
  font-size: 18px !important;
  line-height: 1.1;
  display: flex;
}

html.ap-ui #ap-shop .shop-icon {
  width: 39px;
  min-width: 39px;
  height: 39px;
  border: 2px solid #fff;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(to bottom, var(--ap-purple-lit), var(--ap-purple-deep));
  box-shadow: 0 4px 0 var(--ap-purple-base), 0 8px 11px rgba(59, 29, 100, 0.18);
  display: grid;
  place-items: center;
}

html.ap-ui #ap-shop .shop-icon .ap-icon {
  width: 22px;
  height: 22px;
}

html.ap-ui #ap-shop .shop-price {
  color: var(--ap-purple-base) !important;
  font-size: 19px !important;
}

html.ap-ui #ap-shop .shop-was {
  color: var(--ap-muted-soft) !important;
}

html.ap-ui #ap-shop .shop-benefit {
  color: #58466f !important;
  font-size: 12.5px !important;
  line-height: 1.42 !important;
}

html.ap-ui #ap-shop .shop-benefit b {
  color: var(--ap-plum) !important;
}

html.ap-ui #ap-shop .shop-tick {
  width: 21px;
  min-width: 21px;
  height: 21px;
  color: var(--ap-success) !important;
}

html.ap-ui #ap-shop .shop-tick .ap-icon {
  width: 18px;
  height: 18px;
}

html.ap-ui #ap-shop .shop-buy {
  min-height: 54px;
  margin-top: 16px !important;
  padding: 10px 15px !important;
  border: 2px solid var(--ap-purple-base) !important;
  border-radius: 17px !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  background:
    linear-gradient(to bottom, var(--ap-purple-lit), var(--ap-purple) 48%, var(--ap-purple-deep)) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.66),
    inset 0 -2px 0 rgba(55, 18, 104, 0.3),
    0 6px 0 var(--ap-purple-base),
    0 13px 21px rgba(59, 29, 100, 0.28) !important;
}

html.ap-ui #ap-shop .shop-buy:active {
  transform: translateY(5px) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.56),
    0 1px 0 var(--ap-purple-base),
    0 6px 10px rgba(59, 29, 100, 0.2) !important;
}

html.ap-ui #ap-shop .shop-owned,
html.ap-ui #ap-shop .shop-availability {
  width: 100%;
  min-height: 44px;
  margin-top: 13px;
  padding: 10px 12px;
  border: 2px solid #b7e8d6;
  border-radius: 14px;
  color: #087c5d;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  background: #edfff8;
}

html.ap-ui #ap-shop .shop-availability {
  border-color: #dacfea;
  color: var(--ap-muted);
  background: #f5effb;
}

html.ap-ui #ap-shop .shop-sizes {
  border: 2px solid #dfd4ed;
  background: #f5effb !important;
}

html.ap-ui #ap-shop .shop-bar,
html.ap-ui #ap-shop .shop-bar.big {
  background: linear-gradient(90deg, var(--ap-purple-lit), var(--ap-purple), var(--ap-pink)) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.48);
}

html.ap-ui #ap-shop .shop-restore {
  min-width: 160px;
  min-height: 46px;
  padding: 9px 14px !important;
  border: 2px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 15px;
  color: var(--ap-plum) !important;
  text-decoration: none !important;
  background: linear-gradient(to bottom, #fff, #eee7f7) !important;
  box-shadow:
    inset 0 2px 0 #fff,
    0 5px 0 rgba(76, 29, 149, 0.38),
    0 10px 15px rgba(59, 29, 100, 0.18);
}

html.ap-ui #ap-shop .shop-fine {
  max-width: 430px;
  margin: 12px auto 0 !important;
  color: rgba(255, 255, 255, 0.82) !important;
  text-shadow: 0 2px 0 rgba(59, 29, 100, 0.26);
}

/* Settings details */
html.ap-ui .ap-settings-list {
  overscroll-behavior: contain;
}

html.ap-ui .ap-setting-card {
  width: 100%;
}

html.ap-ui .ap-setting-card > div,
html.ap-ui .ap-setting-copy {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  display: flex;
}

html.ap-ui .ap-setting-copy {
  justify-content: flex-start;
}

html.ap-ui .ap-setting-copy > span:first-child,
html.ap-ui .ap-settings-link-icon {
  width: 44px;
  min-width: 44px;
  height: 44px;
  border: 2px solid #fff;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(to bottom, var(--ap-purple-lit), var(--ap-purple-deep));
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.58),
    0 4px 0 var(--ap-purple-base),
    0 8px 12px rgba(59, 29, 100, 0.18);
  display: grid;
  place-items: center;
}

html.ap-ui .ap-setting-copy strong,
html.ap-ui .ap-settings-link strong {
  display: block;
  color: var(--ap-plum);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
}

html.ap-ui .ap-setting-copy small,
html.ap-ui .ap-settings-link small {
  display: block;
  margin-top: 3px;
  color: var(--ap-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}

html.ap-ui .ap-section-label {
  min-height: 0 !important;
  margin: 23px 4px 9px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 12px;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(59, 29, 100, 0.28);
  background: transparent !important;
  box-shadow: none !important;
}

html.ap-ui .ap-settings-link {
  width: 100%;
  min-height: 64px !important;
  margin-bottom: 12px !important;
  padding: 9px 11px !important;
  align-items: center;
  gap: 11px;
  border: 3px solid #fff !important;
  color: var(--ap-ink);
  text-align: left;
  text-decoration: none;
  display: flex;
}

html.ap-ui .ap-settings-link > span:nth-child(2) {
  flex: 1 1 auto;
  min-width: 0;
}

html.ap-ui .ap-settings-chevron {
  flex: 0 0 auto;
  color: var(--ap-purple-deep);
}

html.ap-ui .ap-settings-chevron .ap-icon {
  width: 18px;
  height: 18px;
}

html.ap-ui .ap-switch {
  position: relative;
  width: 58px;
  min-width: 58px;
  height: 32px;
}

html.ap-ui .ap-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

html.ap-ui .ap-switch > span {
  position: absolute;
  inset: 0;
  border: 3px solid #d5cae6;
  border-radius: 999px;
  cursor: pointer;
  background: #e7dfef;
  box-shadow: inset 0 4px 7px rgba(59, 29, 100, 0.18);
  transition: background 180ms ease, border-color 180ms ease;
}

html.ap-ui .ap-switch > span::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border: 2px solid #fff;
  border-radius: 50%;
  content: "";
  background: linear-gradient(to bottom, #fff, #eee8f6);
  box-shadow: 0 3px 0 #b9aacd, 0 6px 8px rgba(59, 29, 100, 0.22);
  transition: transform 190ms var(--ap-ease-spring);
}

html.ap-ui .ap-switch input:checked + span {
  border-color: #0e9a70;
  background: linear-gradient(to bottom, #63ead6, var(--ap-mint) 52%, #16a085);
}

html.ap-ui .ap-switch input:checked + span::after {
  transform: translateX(26px);
}

/* Shared overlays, help, confirms, toasts, and durable states */
html.ap-ui .ap-overlay,
html.ap-ui .ap-confirm-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1900 !important;
  padding: 18px;
  align-items: center;
  justify-content: center;
  background: rgba(38, 15, 72, 0.78) !important;
  display: flex;
}

html.ap-ui .ap-overlay .ap-card,
html.ap-ui .ap-confirm {
  width: min(100%, 390px);
  max-width: 390px !important;
  padding: 24px 20px 21px !important;
  border: 5px solid #fff !important;
  border-radius: 29px !important;
  text-align: center;
  background:
    radial-gradient(circle at 20% 0, #fff, var(--ap-pearl) 50%, #eee4f8) !important;
  box-shadow:
    inset 0 4px 0 #fff,
    inset 0 -4px 0 rgba(91, 61, 131, 0.12),
    0 8px 0 #c5b5df,
    0 22px 44px rgba(42, 17, 82, 0.42) !important;
  animation: ap-card-pop 300ms var(--ap-ease-spring) both;
}

html.ap-ui .ap-emoji,
html.ap-ui .ap-modal-icon,
html.ap-ui .ap-confirm-icon {
  position: relative;
  width: 52px;
  height: 52px;
  margin: 0 auto 15px;
  border: 4px solid #fff;
  border-radius: 17px;
  color: #fff;
  font-size: 0 !important;
  transform: rotate(7deg);
  background:
    linear-gradient(145deg, var(--ap-purple-lit), var(--ap-purple) 50%, var(--ap-pink));
  box-shadow:
    inset 0 4px 0 rgba(255, 255, 255, 0.58),
    0 6px 0 var(--ap-purple-base),
    0 12px 18px rgba(59, 29, 100, 0.25);
}

html.ap-ui .ap-emoji::before {
  position: absolute;
  inset: 13px;
  border: 3px solid rgba(255, 255, 255, 0.88);
  content: "";
  transform: rotate(45deg);
}

html.ap-ui .ap-modal-icon,
html.ap-ui .ap-confirm-icon {
  font-size: 24px !important;
  display: grid;
  place-items: center;
}

html.ap-ui .ap-modal-icon .ap-icon,
html.ap-ui .ap-confirm-icon .ap-icon {
  width: 26px;
  height: 26px;
}

html.ap-ui .ap-title,
html.ap-ui .ap-confirm h2 {
  margin: 0 0 6px !important;
  color: var(--ap-plum) !important;
  font-size: clamp(20px, 6vw, 25px) !important;
  font-weight: 900 !important;
  line-height: 1.1;
}

html.ap-ui .ap-sub,
html.ap-ui .ap-confirm p {
  margin: 0 0 19px !important;
  color: var(--ap-muted) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

html.ap-ui .ap-art-choice-card {
  width: min(100%, 380px);
  max-width: 380px !important;
}

html.ap-ui .ap-art-choice-preview {
  width: min(58vw, 190px);
  max-height: 190px;
  aspect-ratio: 1;
  margin: -2px auto 16px;
  padding: 8px;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 20px;
  color: var(--ap-purple);
  background: linear-gradient(145deg, #fff, #f5edf9);
  box-shadow:
    inset 0 0 0 2px #ded3ec,
    0 6px 0 #c6b6dc,
    0 13px 20px rgba(59, 29, 100, 0.23);
  display: grid;
  place-items: center;
}

html.ap-ui .ap-art-choice-preview img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: contain;
  display: block;
}

html.ap-ui .ap-art-choice-preview > .ap-icon {
  width: 58px;
  height: 58px;
}

html.ap-ui .ap-art-choice-status {
  width: max-content;
  max-width: 100%;
  min-height: 32px;
  margin: 9px auto 12px;
  padding: 6px 11px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px solid #b7eadc;
  border-radius: 999px;
  color: #087c5d;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  background: #edfff9;
  display: flex;
}

html.ap-ui .ap-art-choice-status .ap-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

html.ap-ui .ap-art-choice-actions {
  gap: 10px;
  display: grid;
}

html.ap-ui .ap-art-choice-actions > .ap-mould {
  width: 100%;
  min-height: 56px;
  margin: 0;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 15px;
  display: flex;
}

html.ap-ui .ap-art-choice-actions > .ap-mould .ap-icon {
  width: 22px;
  height: 22px;
}

html.ap-ui .ap-art-choice-cancel {
  min-height: 42px;
  border: 0;
  border-radius: 13px;
  color: var(--ap-muted);
  font-size: 13px;
  font-weight: 900;
  background: transparent;
}

html.ap-ui .ap-confirm > div:last-child {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  display: grid;
}

html.ap-ui .ap-confirm > div:last-child button {
  width: 100%;
  min-width: 0;
  padding-inline: 8px;
}

html.ap-ui .ap-help-list {
  width: 100%;
}

html.ap-ui .ap-help-row {
  min-height: 67px;
  padding: 10px 2px;
  align-items: center;
  gap: 12px;
  border-bottom: 2px solid #e6dcef;
  display: flex;
}

html.ap-ui .ap-help-row:last-child {
  border-bottom: 0;
}

html.ap-ui .ap-help-row > span {
  width: 46px;
  min-width: 46px;
  height: 46px;
  border: 2px solid #fff;
  border-radius: 15px;
  color: #fff;
  background:
    linear-gradient(to bottom, var(--ap-purple-lit), var(--ap-purple) 48%, var(--ap-purple-deep));
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.58),
    0 4px 0 var(--ap-purple-base),
    0 8px 12px rgba(59, 29, 100, 0.18);
  display: grid;
  place-items: center;
}

html.ap-ui .ap-help-row > div {
  min-width: 0;
}

html.ap-ui .ap-help-row strong {
  display: block;
  color: var(--ap-plum);
  font-size: 14px;
  font-weight: 900;
}

html.ap-ui .ap-help-row p {
  margin: 2px 0 0;
  color: var(--ap-muted);
  font-size: 12px;
  line-height: 1.35;
}

html.ap-ui #ap-toast-host,
html.ap-ui .ap-toast-host,
html.ap-ui .ap-legacy-toast {
  position: fixed !important;
  top: max(14px, calc(var(--ap-safe-top) + 8px)) !important;
  right: 12px !important;
  left: 12px !important;
  z-index: 2200 !important;
  width: min(calc(100% - 24px), 430px);
  min-height: 52px;
  margin-inline: auto;
  padding: 10px 14px !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 3px solid #fff;
  border-radius: 17px;
  color: var(--ap-plum) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-18px) scale(0.96);
  background: linear-gradient(to bottom, #fff, var(--ap-pearl) 54%, #e8dff4) !important;
  box-shadow:
    inset 0 3px 0 #fff,
    0 6px 0 #c5b5dc,
    0 15px 25px rgba(42, 17, 82, 0.32) !important;
  transition: opacity 180ms ease, transform 260ms var(--ap-ease-spring) !important;
  display: flex;
}

html.ap-ui #ap-toast-host.show,
html.ap-ui .ap-toast-host.show,
html.ap-ui .ap-legacy-toast.show,
html.ap-ui .ap-legacy-toast.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

html.ap-ui #ap-toast-host[data-kind="success"],
html.ap-ui .ap-toast-success {
  color: #087c5d !important;
  background: linear-gradient(to bottom, #fff, #ecfff8 58%, #d5f7ec) !important;
  box-shadow:
    inset 0 3px 0 #fff,
    0 6px 0 #79cbb3,
    0 15px 25px rgba(42, 17, 82, 0.27) !important;
}

html.ap-ui #ap-toast-host[data-kind="error"],
html.ap-ui .ap-toast-error {
  color: #8b153b !important;
  background: linear-gradient(to bottom, #fff, #fff0f4 58%, #ffd6df) !important;
  box-shadow:
    inset 0 3px 0 #fff,
    0 6px 0 #da7890,
    0 15px 25px rgba(42, 17, 82, 0.27) !important;
}

html.ap-ui #ap-toast-host[data-kind="reward"],
html.ap-ui .ap-toast-reward {
  color: var(--ap-purple-base) !important;
  background: linear-gradient(to bottom, #fff, #fff7cf 58%, #f4df81) !important;
  box-shadow:
    inset 0 3px 0 #fff,
    0 6px 0 #b88b22,
    0 15px 25px rgba(42, 17, 82, 0.27) !important;
}

html.ap-ui #p3-next-preview.ap-next-preview {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding:
    max(28px, calc(var(--ap-safe-top) + 20px))
    22px
    max(28px, calc(var(--ap-safe-bottom) + 20px));
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.34), transparent 34%),
    radial-gradient(circle at 16% 78%, rgba(236, 72, 153, 0.28), transparent 28%),
    linear-gradient(145deg, #c5b3ff 0%, var(--ap-purple) 54%, #722ee2 100%);
  transition: opacity 300ms ease;
}

html.ap-ui #p3-next-preview::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.32;
  background:
    linear-gradient(90deg, transparent 49.6%, rgba(255, 255, 255, 0.2) 50%, transparent 50.4%),
    linear-gradient(transparent 49.6%, rgba(255, 255, 255, 0.16) 50%, transparent 50.4%);
  background-size: 118px 118px;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 82%, transparent);
}

html.ap-ui .ap-next-preview-card {
  position: relative;
  z-index: 1;
  width: min(100%, 350px);
  padding: 24px 22px 26px;
  text-align: center;
  animation: ap-card-pop 300ms var(--ap-ease-spring) both;
}

html.ap-ui .ap-next-preview-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  margin-bottom: 14px;
  padding: 5px 13px 7px;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  background: linear-gradient(to bottom, var(--ap-pink-lit), var(--ap-pink));
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.52),
    0 4px 0 var(--ap-pink-base),
    0 9px 15px rgba(82, 20, 96, 0.22);
}

html.ap-ui .ap-next-preview-kicker .ap-icon {
  width: 17px;
  height: 17px;
}

html.ap-ui .ap-next-preview-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: min(58vw, 210px);
  aspect-ratio: 1;
  margin: 4px auto 20px;
  padding: 10px;
  overflow: hidden;
  border: 5px solid #fff;
  border-radius: 28px;
  color: var(--ap-pink);
  transform: rotate(-2deg);
  background:
    linear-gradient(145deg, #fff, #f5efff 55%, #dfd1f3);
  box-shadow:
    inset 0 5px 0 #fff,
    inset 0 -5px 0 rgba(72, 42, 106, 0.13),
    0 9px 0 #a88dd3,
    0 19px 30px rgba(49, 19, 86, 0.27);
}

html.ap-ui .ap-next-preview-frame > .ap-icon {
  width: 58px;
  height: 58px;
  opacity: 0.62;
}

html.ap-ui .ap-next-preview-frame img {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  border-radius: 17px;
  object-fit: cover;
  opacity: 0;
  transition: opacity 160ms ease;
}

html.ap-ui .ap-next-preview-frame img.is-loaded {
  opacity: 1;
}

html.ap-ui .ap-next-preview-card h2 {
  margin: 0 0 6px;
  color: #fff;
  font-size: clamp(24px, 7vw, 31px);
  font-weight: 900;
  line-height: 1.05;
  -webkit-text-stroke: 3px var(--ap-plum);
  paint-order: stroke fill;
  text-shadow:
    0 4px 0 var(--ap-plum),
    0 9px 17px rgba(61, 28, 101, 0.22);
}

html.ap-ui .ap-next-preview-card p {
  margin: 0;
  color: var(--ap-muted);
  font-size: 14px;
  font-weight: 800;
}

html.ap-ui .ap-next-preview-progress {
  height: 12px;
  margin-top: 17px;
  padding: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: #ded2ed;
  box-shadow: inset 0 2px 4px rgba(52, 27, 83, 0.18);
}

html.ap-ui .ap-next-preview-progress i {
  display: block;
  width: 52%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ap-purple), var(--ap-pink));
  animation: ap-next-preview-progress 900ms ease-in-out infinite alternate;
}

@keyframes ap-next-preview-progress {
  from {
    transform: translateX(-48%);
  }
  to {
    transform: translateX(96%);
  }
}

html.ap-ui .ap-durable-banner,
html.ap-ui .ap-storage-banner,
html.ap-ui .ap-update-banner {
  position: relative;
  width: min(calc(100% - 24px), 620px);
  min-height: 58px;
  margin: 10px auto;
  padding: 11px 14px;
  border: 3px solid #fff;
  border-radius: 17px;
  color: #7f1235;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  background: linear-gradient(to bottom, #fff, #fff0f4 58%, #ffd7df);
  box-shadow:
    inset 0 3px 0 #fff,
    0 5px 0 #d57c92,
    0 11px 17px rgba(59, 29, 100, 0.2);
}

html.ap-ui .ap-empty-state {
  width: min(calc(100% - 28px), 460px);
  margin: 9dvh auto 0;
  padding: 27px 21px 24px;
  border: 4px solid #fff;
  border-radius: 28px;
  text-align: center;
  background: linear-gradient(145deg, #fff, var(--ap-pearl) 52%, #eee5fa);
  box-shadow:
    inset 0 4px 0 #fff,
    0 8px 0 rgba(76, 29, 149, 0.42),
    0 18px 28px rgba(59, 29, 100, 0.28);
}

html.ap-ui .ap-empty-illustration {
  width: 126px;
  height: 104px;
  margin: 0 auto 18px;
  border: 10px solid var(--ap-purple);
  border-radius: 10px;
  color: var(--ap-pink);
  background: linear-gradient(145deg, #fff, var(--ap-lilac));
  box-shadow:
    inset 0 7px 12px rgba(59, 29, 100, 0.17),
    inset 0 0 0 5px #fff,
    0 7px 0 var(--ap-purple-base),
    0 15px 20px rgba(59, 29, 100, 0.24);
  transform: rotate(-4deg);
  display: grid;
  place-items: center;
}

html.ap-ui .ap-empty-illustration .ap-icon {
  width: 52px;
  height: 52px;
}

html.ap-ui .ap-empty-state h2 {
  margin: 0;
  color: var(--ap-plum);
  font-size: 23px;
  font-weight: 900;
}

html.ap-ui .ap-empty-state p {
  max-width: 330px;
  margin: 7px auto 20px;
  color: var(--ap-muted);
  font-size: 13px;
  line-height: 1.45;
}

html.ap-ui .ap-empty-state > button {
  width: 100%;
}

/* Phase-specific chrome. These rules remove layout and hit testing without
   competing with the engine's hidden-phase display contract. */
html.ap-ui body.ap-phase-1 #ap-p2-history,
html.ap-ui body.ap-phase-1 #ap-more-btn,
html.ap-ui body.ap-phase-2 #ap-p1-help,
html.ap-ui body.ap-phase-2 #progress-pill,
html.ap-ui body.ap-phase-2 #header-title {
  position: absolute !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

html.ap-ui body.ap-phase-1 #ap-p1-help {
  position: relative;
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
}

html.ap-ui body.ap-phase-1 #game-header > .ap-header-left,
html.ap-ui body.ap-phase-1 #game-header > .ap-header-right {
  flex: 0 0 auto;
}

html.ap-ui body.ap-phase-1 #header-title {
  min-width: 0;
  max-width: 100%;
}

html.ap-ui body.ap-phase-2 #game-header > .ap-header-left {
  flex: 0 0 auto;
}

html.ap-ui body.ap-phase-2 #game-header > .ap-header-right {
  flex: 1 1 auto;
  justify-content: flex-end;
}

/* Motion */
@keyframes ap-piece-assemble {
  0%,
  12% {
    opacity: 0.44;
    transform: translate(var(--ap-piece-x, 0), 14px) rotate(var(--ap-piece-r, 0deg)) scale(0.82);
  }
  54%,
  76% {
    opacity: 1;
    transform: translate(var(--ap-piece-x, 0), 0) rotate(0deg) scale(1);
  }
  100% {
    opacity: 0.5;
    transform: translate(var(--ap-piece-x, 0), -6px) rotate(calc(var(--ap-piece-r, 0deg) * -0.35)) scale(0.9);
  }
}

@keyframes ap-sheet-in {
  0% {
    opacity: 0;
    transform: translateY(26px) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ap-card-pop {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ap-ribbon-settle {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-24px) rotate(-5deg) scale(0.78);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) rotate(-1.5deg) scale(1);
  }
}

@keyframes ap-done-pulse {
  0%,
  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
  46% {
    transform: translateY(-4px) scale(1.06);
    filter: brightness(1.08);
  }
}

@keyframes ap-card-enter {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

html.ap-ui #puzzle-grid > .puzzle-card:nth-child(1) {
  animation: ap-card-enter 340ms var(--ap-ease-settle) 35ms both;
}

html.ap-ui #puzzle-grid > .puzzle-card:nth-child(2) {
  animation: ap-card-enter 340ms var(--ap-ease-settle) 70ms both;
}

html.ap-ui #puzzle-grid > .puzzle-card:nth-child(3) {
  animation: ap-card-enter 340ms var(--ap-ease-settle) 105ms both;
}

html.ap-ui #puzzle-grid > .puzzle-card:nth-child(4) {
  animation: ap-card-enter 340ms var(--ap-ease-settle) 140ms both;
}

html.ap-ui #puzzle-grid > .puzzle-card:nth-child(5) {
  animation: ap-card-enter 340ms var(--ap-ease-settle) 175ms both;
}

html.ap-ui #puzzle-grid > .puzzle-card:nth-child(6) {
  animation: ap-card-enter 340ms var(--ap-ease-settle) 210ms both;
}

html.ap-ui #puzzle-grid > .puzzle-card:nth-child(7) {
  animation: ap-card-enter 340ms var(--ap-ease-settle) 245ms both;
}

html.ap-ui #puzzle-grid > .puzzle-card:nth-child(8) {
  animation: ap-card-enter 340ms var(--ap-ease-settle) 280ms both;
}

/* Required phone widths */
@media (max-width: 380px) {
  html.ap-ui {
    --ap-control: 44px;
  }

  html.ap-ui #menu-header {
    padding-inline: 10px !important;
  }

  html.ap-ui #menu-header h1 {
    font-size: 28px !important;
  }

  html.ap-ui #menu-header h1 + div {
    font-size: 8.5px !important;
  }

  html.ap-ui #gem-pill {
    min-width: 61px;
    padding-inline: 10px !important;
  }

  html.ap-ui #menu-settings-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  html.ap-ui #puzzle-library {
    padding-inline: 10px !important;
  }

  html.ap-ui #puzzle-grid {
    gap: 18px 10px !important;
  }

  html.ap-ui #home-hero {
    min-height: 132px;
    gap: 10px !important;
    padding: 11px !important;
  }

  html.ap-ui #home-hero .hh-thumb {
    width: 82px !important;
    height: 82px !important;
    flex-basis: 82px !important;
  }

  html.ap-ui #home-hero .hh-title {
    font-size: 14px !important;
  }

  html.ap-ui #home-hero .hh-sub {
    font-size: 10.5px !important;
  }

  html.ap-ui #home-hero .hh-btn {
    min-width: 68px;
    min-height: 44px;
    padding-inline: 9px !important;
    font-size: 10.5px !important;
  }

  html.ap-ui .puzzle-card,
  html.ap-ui .my-art-card {
    padding: 6px 6px 8px;
    border-radius: 20px !important;
  }

  html.ap-ui .puzzle-card-info {
    min-height: 59px;
    padding: 9px 3px 2px !important;
  }

  html.ap-ui .puzzle-card-title,
  html.ap-ui .my-art-card-title {
    font-size: 13px !important;
  }

  html.ap-ui .puzzle-card-badge,
  html.ap-ui .puzzle-edge-badge,
  html.ap-ui .new-badge,
  html.ap-ui .progress-badge {
    right: 5px !important;
    max-width: calc(100% - 10px);
    padding-inline: 7px !important;
  }

  html.ap-ui #game-header {
    width: calc(100% - 10px);
    min-height: 60px !important;
    margin: 5px 5px 7px !important;
    padding: 6px 5px !important;
  }

  html.ap-ui #game-header .hdr-icon {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  html.ap-ui #header-title {
    margin-inline: 3px;
    font-size: 14px !important;
  }

  html.ap-ui #progress-pill {
    padding-inline: 6px !important;
    font-size: 10px !important;
  }

  html.ap-ui #main-area {
    margin-inline: 5px;
  }

  html.ap-ui #ap-p1-actions {
    right: 6px;
    left: 6px;
    gap: 5px;
  }

  html.ap-ui #ap-p1-actions > button,
  html.ap-ui #ap-p1-actions > .ap-control {
    padding-inline: 2px;
    font-size: 10px !important;
  }

  html.ap-ui #bottom-bar {
    margin-inline: 5px !important;
  }

  html.ap-ui #p2-bottom-area {
    right: 4px !important;
    left: 4px !important;
    padding-inline: 5px !important;
  }

  html.ap-ui #ap-shades {
    gap: 7px;
  }

  html.ap-ui #p2-new-dock {
    gap: 1px !important;
    padding-inline: 0 !important;
  }

  html.ap-ui #p2-new-dock .p2-tool-btn {
    min-width: 44px !important;
    padding-inline: 0 !important;
  }

  html.ap-ui #p2-new-dock .p2-tool-btn .ap-icon {
    width: 21px;
    height: 21px;
  }

  html.ap-ui #p2-new-dock .p2-tool-btn .ap-tool-label {
    font-size: 8.4px;
  }

  html.ap-ui #ap-p2-history {
    gap: 3px;
  }

  html.ap-ui #ap-p2-history > button {
    width: 44px;
    min-width: 44px;
  }

  html.ap-ui #ap-more-btn,
  html.ap-ui #btn-toggle-3d {
    min-width: 58px;
    padding-inline: 6px !important;
  }

  html.ap-ui #ap-p3-nav {
    padding-inline: 6px !important;
  }

  html.ap-ui #ap-p3-nav > div:first-child {
    gap: 4px !important;
  }

  html.ap-ui #ap-p3-nav .p3-action-btn {
    padding-inline: 2px !important;
  }

  html.ap-ui #p3-scene {
    padding-right: 8px !important;
    padding-left: 8px !important;
  }

  html.ap-ui #ap-p3-actions {
    right: 5px;
    left: 5px;
    padding: 7px;
    gap: 5px;
  }

  html.ap-ui .ap-save-fact {
    padding-inline: 8px;
  }

  html.ap-ui .ap-save-fact-value {
    font-size: 12px;
  }
}

@media (min-width: 600px) {
  html.ap-ui #menu-bottom-nav {
    right: 50% !important;
    left: auto !important;
    width: min(560px, calc(100% - 28px)) !important;
    transform: translateX(50%);
  }

  html.ap-ui #puzzle-library {
    padding-inline: 24px !important;
  }

  html.ap-ui #puzzle-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 23px 17px !important;
  }

  html.ap-ui #home-hero {
    min-height: 174px;
  }

  html.ap-ui #home-hero .hh-thumb {
    width: 130px !important;
    height: 130px !important;
    flex-basis: 130px !important;
  }

  html.ap-ui .cat-pill {
    flex-basis: calc(12.5% - 7px) !important;
    min-height: 47px;
  }

  html.ap-ui #game-header {
    width: calc(100% - 28px);
    max-width: 1180px;
    margin-inline: auto !important;
  }

  html.ap-ui #main-area {
    margin-inline: 14px;
  }

  html.ap-ui #bottom-bar {
    margin-inline: 14px !important;
  }

  /* Phase 1's actions become a SIDE COLUMN on a large screen, which is the
     move phase 2's tool dock already makes twenty lines below.

     They used to stay a horizontal strip pinned to the right edge, and that
     failed twice on a tablet. The strip floats over the board, and in landscape
     there is no longer 60px of clear air between the board's bottom edge and
     the tray, so on a short viewport (a 7-inch tablet is 540 CSS px tall) the
     pieces covered it and "Edges" became unreadable. Meanwhile the board is
     square and the screen is not, so the widest part of the layout was hundreds
     of pixels of unused white on either side.

     Moving the column into that white space fixes the collision by leaving the
     vertical axis alone entirely, and it matches what phase 2 does, so a player
     crossing from assembly to colouring sees their controls stay put.

     Anchored ABOVE the bottom bar rather than centred on the screen. The dock
     next door can centre itself with `fixed` because it is a direct child of
     the shell; this row is a child of #bottom-bar, which is its containing
     block, so both `fixed` and a 50% offset resolve against the 112px tray and
     the column ends up straddling it with "Hint" cut off by the screen edge.
     `bottom: calc(100% + 22px)` means "sit entirely above my container", which
     needs no assumption about viewport height and so holds on any tablet. */
  html.ap-ui #ap-p1-actions {
    position: absolute;
    top: auto;
    right: auto;
    bottom: calc(100% + 22px);
    left: 16px;
    width: 172px;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    transform: none;
  }

  html.ap-ui #ap-p1-actions > button,
  html.ap-ui #ap-p1-actions > .ap-control {
    justify-content: flex-start;
    padding-inline: 16px;
  }

  html.ap-ui #ap-p3-actions {
    right: 50%;
    left: auto;
    width: min(620px, calc(100% - 28px));
    transform: translateX(50%);
  }

  html.ap-ui #p3-display-canvas {
    max-width: min(61vw, 620px) !important;
  }
}

@media (min-width: 900px) {
  html.ap-ui #puzzle-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 26px 20px !important;
  }

  html.ap-ui #home-hero {
    min-height: 196px;
    padding: 17px !important;
  }

  html.ap-ui #home-hero .hh-thumb {
    width: 152px !important;
    height: 152px !important;
    flex-basis: 152px !important;
  }

  html.ap-ui body.ap-phase-2 #main-area {
    margin-left: 108px;
  }

  html.ap-ui #p2-bottom-area {
    right: 30px !important;
    left: 130px !important;
    width: min(620px, calc(100% - 190px)) !important;
    max-width: 620px !important;
    margin-inline: auto;
    transform: none;
  }

  html.ap-ui #p2-new-dock {
    position: fixed !important;
    top: 50%;
    right: auto !important;
    bottom: auto !important;
    left: 16px !important;
    width: 82px !important;
    min-height: 0;
    padding: 8px 7px !important;
    flex-direction: column;
    gap: 4px !important;
    border: 4px solid rgba(255, 255, 255, 0.92) !important;
    border-radius: 25px !important;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.98), rgba(241, 233, 251, 0.98)) !important;
    box-shadow:
      inset 4px 0 0 #fff,
      inset -3px 0 0 rgba(92, 57, 137, 0.1),
      7px 0 0 rgba(76, 29, 149, 0.42),
      16px 0 26px rgba(42, 17, 82, 0.3) !important;
    transform: translateY(-50%);
  }

  html.ap-ui #p2-new-dock .p2-tool-btn {
    flex: 0 0 59px !important;
    width: 100% !important;
    min-width: 59px !important;
    height: 59px !important;
  }

  html.ap-ui #p2-new-dock .p2-tool-btn.active {
    transform: translateX(10px) scale(1.04);
  }

  html.ap-ui body.ap-paint-active #p2-bottom-area {
    opacity: 0;
    transform: translateY(calc(100% + var(--ap-safe-bottom) + 22px));
  }

  html.ap-ui #p3-scene {
    padding-top: calc(82px + var(--ap-safe-top)) !important;
    padding-bottom: calc(100px + var(--ap-safe-bottom)) !important;
  }

  html.ap-ui #ap-p3-nav {
    min-height: 75px;
    flex-wrap: nowrap !important;
    padding-inline: 18px !important;
  }

  html.ap-ui #ap-p3-nav > div:first-child {
    order: 1;
    width: auto;
    min-width: 360px;
  }

  html.ap-ui #ap-p3-nav .p3-title-area {
    order: 2;
    flex: 1 1 auto;
    width: auto;
  }

  html.ap-ui #ap-p3-nav > div:last-child {
    order: 3;
    position: static;
    width: 360px;
    height: 1px;
  }

  html.ap-ui #ap-p3-actions {
    width: min(720px, calc(100% - 40px));
    grid-template-columns: 1fr 1fr 1.45fr;
  }

  html.ap-ui #ap-p3-actions #p3-next-btn {
    grid-column: auto;
  }

  html.ap-ui #ap-p3-celebration {
    top: calc(78px + var(--ap-safe-top));
  }
}

@media (min-width: 1280px) {
  html.ap-ui #puzzle-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  html.ap-ui #puzzle-library {
    padding-inline: 36px !important;
  }
}

@media (max-height: 700px) {
  html.ap-ui #game-header {
    min-height: 56px !important;
    margin-top: 4px !important;
    margin-bottom: 5px !important;
  }

  html.ap-ui #game-header .hdr-icon,
  html.ap-ui #ap-p2-history > button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  html.ap-ui #p2-bottom-area {
    padding-block: 5px !important;
  }

  html.ap-ui #ap-shades {
    min-height: 42px;
    padding-bottom: 2px;
  }

  html.ap-ui #ap-shades .ap-shade,
  html.ap-ui #ap-shades .ap-shade-btn,
  html.ap-ui #ap-shades [data-shade] {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    flex-basis: 44px;
  }

  html.ap-ui #ap-shades .ap-shade:nth-child(3),
  html.ap-ui #ap-shades .ap-shade-btn:nth-child(3),
  html.ap-ui #ap-shades [data-shade="0"],
  html.ap-ui #ap-shades [aria-current="true"] {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  html.ap-ui #p2-new-dock .p2-tool-btn {
    height: 52px !important;
    min-height: 52px !important;
  }

  html.ap-ui #difficulty-picker {
    max-height: 96dvh;
  }

  html.ap-ui #picker-preview-wrap {
    max-height: 18dvh;
  }

  html.ap-ui #picker-preview-canvas {
    max-height: calc(18dvh - 14px);
  }

  html.ap-ui #p3-scene {
    padding-top: calc(108px + var(--ap-safe-top)) !important;
    padding-bottom: calc(124px + var(--ap-safe-bottom)) !important;
  }

  html.ap-ui #p3-display-canvas {
    max-height: 34dvh !important;
  }

  html.ap-ui #ap-p3-celebration {
    top: calc(108px + var(--ap-safe-top));
  }
}

@media (hover: hover) and (pointer: fine) {
  html.ap-ui .puzzle-card:hover,
  html.ap-ui .my-art-card:hover {
    transform: translateY(-4px);
    box-shadow:
      inset 0 3px 0 rgba(255, 255, 255, 0.98),
      inset 0 -3px 0 rgba(101, 69, 145, 0.1),
      0 9px 0 rgba(76, 29, 149, 0.4),
      0 20px 28px rgba(59, 29, 100, 0.3) !important;
  }

  html.ap-ui button:hover,
  html.ap-ui [role="button"]:hover {
    filter: brightness(1.035) saturate(1.04);
  }
}

@supports not (-webkit-text-stroke: 1px #000) {
  html.ap-ui .ap-display,
  html.ap-ui .ap-display-title,
  html.ap-ui .ap-screen-title,
  html.ap-ui .ap-celebration-title,
  html.ap-ui #menu-header h1,
  html.ap-ui #p3-title {
    text-shadow:
      -2px -2px 0 var(--ap-plum),
      2px -2px 0 var(--ap-plum),
      -2px 2px 0 var(--ap-plum),
      2px 2px 0 var(--ap-plum),
      0 5px 0 var(--ap-plum),
      0 10px 16px rgba(42, 17, 82, 0.34) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.ap-ui *,
  html.ap-ui *::before,
  html.ap-ui *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* Stage 2 integration details added after the functional DOM rewrite. */
html.ap-ui .puzzle-card-info {
  display: block !important;
}

html.ap-ui .puzzle-edge-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
}

html.ap-ui .puzzle-edge-badge .ap-icon {
  width: 13px;
  height: 13px;
}

html.ap-ui .cat-pill {
  gap: 3px !important;
  padding-inline: 3px !important;
  font-size: 10px !important;
}

html.ap-ui .cat-pill .ap-icon {
  width: 15px;
  height: 15px;
}

html.ap-ui .cat-pill > span {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

html.ap-ui #home-hero .hh-title {
  display: -webkit-box;
  overflow: hidden !important;
  line-height: 1.08;
  text-overflow: clip !important;
  white-space: normal !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html.ap-ui .ap-hint-count {
  min-width: 17px;
  margin-left: 2px;
  padding: 2px 4px;
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  background: var(--ap-purple-deep);
}

html.ap-ui #picker-puzzle-title {
  max-width: 92%;
  margin: 0 auto 4px;
  color: var(--ap-plum);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
}

html.ap-ui .piece-opt .gem-earned-mark {
  position: static !important;
  min-height: 0;
  margin-top: 2px;
  padding: 0 !important;
  border: 0 !important;
  color: #137b5d !important;
  font-size: 8px !important;
  text-shadow: none;
  background: transparent !important;
  box-shadow: none !important;
}

html.ap-ui .piece-opt .gem-earned-mark .ap-icon {
  width: 9px;
  height: 9px;
}

html.ap-ui #daily-mini {
  grid-column: 1 / -1;
  min-height: 82px;
  padding: 9px 11px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 64px;
  align-items: center;
  gap: 10px;
  overflow: visible;
  border: 4px solid #fff;
  border-radius: 21px;
  color: var(--ap-plum);
  cursor: pointer;
  background: linear-gradient(145deg, #fff, var(--ap-pearl) 55%, #eee5f8);
  box-shadow:
    inset 0 3px 0 #fff,
    0 6px 0 #c5b5df,
    0 13px 20px rgba(59, 29, 100, 0.23);
}

html.ap-ui #daily-mini .dm-seal {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(to bottom, var(--ap-pink-lit), var(--ap-pink-deep));
  box-shadow: 0 5px 0 var(--ap-pink-base), 0 9px 12px rgba(59, 29, 100, 0.2);
}

html.ap-ui #daily-mini .dm-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

html.ap-ui #daily-mini .dm-copy span,
html.ap-ui #daily-mini .dm-copy small {
  color: var(--ap-muted);
  font-size: 10px;
  font-weight: 800;
}

html.ap-ui #daily-mini .dm-copy strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.ap-ui #daily-mini .dm-thumb {
  width: 60px;
  height: 60px;
  border: 3px solid #ddd2eb;
  border-radius: 14px;
  background-position: center;
  background-size: cover;
}

html.ap-ui #ap-daily-streak {
  grid-column: 1 / -1;
  min-height: 116px;
  margin: 2px 2px 14px;
  padding: 12px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) minmax(72px, auto);
  align-items: center;
  gap: 10px;
  overflow: visible;
  border: 4px solid rgba(255, 255, 255, 0.94);
  border-radius: 24px;
  color: var(--ap-plum);
  background:
    radial-gradient(circle at 8% 0, rgba(255, 255, 255, 0.98), transparent 33%),
    linear-gradient(145deg, #fff, var(--ap-pearl) 52%, #f4ddf0);
  box-shadow:
    inset 0 3px 0 #fff,
    inset 0 -3px 0 rgba(101, 69, 145, 0.1),
    0 7px 0 rgba(76, 29, 149, 0.4),
    0 15px 22px rgba(59, 29, 100, 0.26);
}

html.ap-ui #ap-daily-streak[role="button"] {
  cursor: pointer;
}

html.ap-ui #ap-daily-streak:focus-visible {
  outline: 4px solid rgba(255, 255, 255, 0.95);
  outline-offset: 3px;
}

html.ap-ui .ap-streak-seal {
  width: 48px;
  height: 48px;
  border: 3px solid #fff;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(to bottom, var(--ap-pink-lit), var(--ap-pink-deep));
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.58),
    0 5px 0 var(--ap-pink-base),
    0 10px 14px rgba(59, 29, 100, 0.22);
  display: grid;
  place-items: center;
}

html.ap-ui .ap-streak-seal .ap-icon {
  width: 26px;
  height: 26px;
  filter: none;
}

html.ap-ui .ap-streak-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

html.ap-ui .ap-streak-kicker {
  color: var(--ap-pink-deep);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

html.ap-ui .ap-streak-copy > strong {
  margin-top: 1px;
  overflow: hidden;
  color: var(--ap-plum);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.ap-ui .ap-streak-copy > small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--ap-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.ap-ui .ap-streak-month {
  margin-top: 8px;
  color: var(--ap-muted);
  font-size: 9px;
  font-weight: 800;
  display: flex;
  justify-content: space-between;
}

html.ap-ui .ap-streak-month b {
  color: var(--ap-purple-base);
  font-weight: 900;
}

html.ap-ui .ap-streak-track {
  width: 100%;
  height: 8px;
  margin-top: 3px;
  padding: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: #ddd2eb;
  box-shadow: inset 0 2px 3px rgba(59, 29, 100, 0.16);
  display: block;
}

html.ap-ui .ap-streak-track i {
  width: max(4px, var(--ap-streak-progress));
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ap-purple), var(--ap-pink), var(--ap-gold));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
  display: block;
}

html.ap-ui .ap-streak-reward {
  min-width: 72px;
  min-height: 78px;
  padding: 8px 6px;
  border: 3px solid #fff;
  border-radius: 18px;
  color: #5b3a08;
  text-align: center;
  background: linear-gradient(145deg, #fff8b9, var(--ap-gold));
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.62),
    0 5px 0 #a66c12,
    0 10px 14px rgba(59, 29, 100, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

html.ap-ui .ap-streak-reward .ap-icon {
  width: 21px;
  height: 21px;
  filter: none;
}

html.ap-ui .ap-streak-reward small {
  margin-top: 2px;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

html.ap-ui .ap-streak-reward strong {
  margin-top: 1px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.05;
}

html.ap-ui .ap-puzzle-loading,
html.ap-ui .ap-load-failed {
  position: fixed;
  inset: 0;
  z-index: 2200;
  padding: 20px;
  display: grid;
  place-items: center;
  color: var(--ap-plum);
  background:
    radial-gradient(circle at 24% 8%, rgba(255, 255, 255, 0.27), transparent 30%),
    linear-gradient(155deg, var(--ap-purple-lit), var(--ap-purple) 48%, var(--ap-purple-deep));
}

html.ap-ui .ap-load-card,
html.ap-ui .ap-load-failed > section {
  width: min(100%, 360px);
  padding: 27px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  border: 5px solid #fff;
  border-radius: 28px;
  text-align: center;
  background: linear-gradient(145deg, #fff, var(--ap-pearl) 55%, #eee5f8);
  box-shadow: 0 8px 0 #c5b5df, 0 24px 42px rgba(42, 17, 82, 0.38);
}

html.ap-ui .ap-load-card > .ap-icon,
html.ap-ui .ap-load-failed > section > .ap-icon {
  width: 54px;
  height: 54px;
  color: var(--ap-pink);
}

html.ap-ui .ap-load-card strong,
html.ap-ui .ap-load-failed h2 {
  font-size: 21px;
  font-weight: 900;
}

html.ap-ui .ap-load-card > span,
html.ap-ui .ap-load-failed p {
  margin: 0;
  color: var(--ap-muted);
  font-size: 13px;
  font-weight: 700;
}

html.ap-ui .ap-load-progress {
  width: 100%;
  height: 12px;
  margin-top: 8px;
  padding: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: #ddd2eb;
  box-shadow: inset 0 2px 4px rgba(59, 29, 100, 0.18);
}

html.ap-ui .ap-load-progress i {
  width: 45%;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ap-purple), var(--ap-pink));
  animation: ap-load-sweep 1.1s ease-in-out infinite alternate;
}

@keyframes ap-load-sweep {
  to { transform: translateX(122%); }
}

html.ap-ui .ap-load-failed > section > div {
  width: 100%;
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

html.ap-ui #modal-box .ap-milestone-ribbon {
  position: absolute;
  top: -20px;
  left: 50%;
  min-width: 230px;
  padding: 12px 22px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 4px solid #fff;
  border-radius: 14px 14px 18px 18px;
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  text-shadow: 0 3px 0 var(--ap-pink-base);
  transform: translateX(-50%) rotate(-1.5deg);
  background: linear-gradient(to bottom, var(--ap-pink-lit), var(--ap-pink) 44%, var(--ap-pink-deep));
  box-shadow: 0 7px 0 var(--ap-pink-base), 0 15px 20px rgba(59, 29, 100, 0.3);
}

html.ap-ui #modal-box .ap-milestone-art {
  width: 76px;
  height: 76px;
  margin: -20px auto 12px;
  display: grid;
  place-items: center;
  border: 5px solid #fff;
  border-radius: 24px;
  color: #fff;
  transform: rotate(5deg);
  background: linear-gradient(145deg, var(--ap-purple-lit), var(--ap-purple), var(--ap-pink));
  box-shadow: 0 7px 0 var(--ap-purple-base), 0 14px 18px rgba(59, 29, 100, 0.24);
}

html.ap-ui #modal-box .ap-milestone-art .ap-icon {
  width: 42px;
  height: 42px;
}

html.ap-ui #modal-box.ap-milestone-card h2 {
  margin: 0 0 8px;
}

html.ap-ui #modal-box .ap-piece-achievement {
  width: min(100%, 290px);
  min-height: 108px;
  margin: 0 auto 12px;
  padding: 8px 16px 11px;
  border: 4px solid #fff;
  border-radius: 22px;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.34), transparent 42%),
    linear-gradient(145deg, var(--ap-purple-lit), var(--ap-purple) 48%, var(--ap-purple-deep));
  box-shadow:
    inset 0 4px 0 rgba(255, 255, 255, 0.42),
    inset 0 -4px 0 rgba(55, 18, 104, 0.22),
    0 6px 0 var(--ap-purple-base),
    0 14px 20px rgba(59, 29, 100, 0.26);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

html.ap-ui #modal-box .ap-piece-achievement strong {
  color: #fff;
  font-size: clamp(54px, 16vw, 68px);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.045em;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 2px var(--ap-plum);
  paint-order: stroke fill;
  font-variant-numeric: lining-nums tabular-nums;
  text-shadow:
    0 4px 0 var(--ap-plum),
    0 9px 13px rgba(42, 17, 82, 0.32);
}

html.ap-ui #modal-box .ap-piece-achievement span {
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(59, 29, 100, 0.38);
}

html.ap-ui #modal-box .ap-piece-tier-skilled strong {
  font-size: clamp(59px, 17vw, 74px);
}

html.ap-ui #modal-box .ap-piece-tier-expert {
  min-height: 116px;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.4), transparent 42%),
    linear-gradient(145deg, var(--ap-pink-lit), var(--ap-pink) 48%, var(--ap-purple-deep));
}

html.ap-ui #modal-box .ap-piece-tier-expert strong {
  font-size: clamp(66px, 19vw, 82px);
}

html.ap-ui #modal-box .ap-piece-tier-master {
  min-height: 126px;
  border-color: #fff8c7;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.52), transparent 40%),
    linear-gradient(145deg, #f6c95f, var(--ap-pink) 48%, var(--ap-purple-deep));
  box-shadow:
    inset 0 5px 0 rgba(255, 255, 255, 0.52),
    inset 0 -4px 0 rgba(91, 31, 107, 0.24),
    0 7px 0 #a66c12,
    0 16px 23px rgba(59, 29, 100, 0.32);
}

html.ap-ui #modal-box .ap-piece-tier-master strong {
  font-size: clamp(74px, 22vw, 94px);
}

html.ap-ui #modal-box .ap-reward-chip,
html.ap-ui #modal-box .ap-reward-note {
  margin: 12px 0;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 14px;
  color: var(--ap-plum);
  font-size: 14px;
  font-weight: 900;
  background: #eee5f8;
  box-shadow: inset 0 2px 4px rgba(59, 29, 100, 0.12);
}

html.ap-ui .ap-daily-complete > section {
  width: min(100%, 370px);
  padding: 28px 22px 22px;
  border: 5px solid #fff;
  border-radius: 28px;
  text-align: center;
  background: linear-gradient(145deg, #fff, var(--ap-pearl) 55%, #eee5f8);
  box-shadow: 0 8px 0 #c5b5df, 0 22px 40px rgba(42, 17, 82, 0.4);
}

html.ap-ui .ap-daily-complete > section > .ap-icon {
  width: 58px;
  height: 58px;
  color: var(--ap-pink);
}

html.ap-ui .ap-daily-badges {
  margin: 16px 0 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

html.ap-ui .ap-daily-badges > span {
  padding: 10px 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 14px;
  color: var(--ap-plum);
  font-size: 11px;
  font-weight: 800;
  background: #eee5f8;
}

html.ap-ui .ap-unlock-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

html.ap-ui .ap-unlock-preview {
  position: relative;
  width: 148px;
  height: 148px;
  margin: 0 auto 14px;
  overflow: hidden;
  border: 5px solid #fff;
  border-radius: 20px;
  background: var(--ap-lilac);
  box-shadow: 0 6px 0 #c5b5df, 0 13px 18px rgba(59, 29, 100, 0.22);
}

html.ap-ui .ap-unlock-preview canvas {
  width: 100%;
  height: 100%;
}

html.ap-ui .ap-unlock-lock {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(59, 29, 100, 0.44);
}

html.ap-ui .ap-unlock-lock .ap-icon {
  width: 42px;
  height: 42px;
}

html.ap-ui .ap-unlock-values {
  margin: 4px 0 11px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

html.ap-ui .ap-unlock-values > span {
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: 14px;
  background: #eee5f8;
}

html.ap-ui .ap-unlock-values small {
  color: var(--ap-muted);
  font-size: 10px;
  font-weight: 800;
}

html.ap-ui .ap-unlock-values strong {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--ap-plum);
  font-size: 18px;
  font-weight: 900;
}

html.ap-ui .ap-unlock-values strong.is-short,
html.ap-ui .ap-unlock-short {
  color: var(--ap-danger);
}

html.ap-ui .ap-art-open-cover {
  position: fixed;
  inset: 0;
  z-index: 2300;
  display: grid;
  place-items: center;
  opacity: 1;
  color: #fff;
  background: linear-gradient(155deg, var(--ap-purple-lit), var(--ap-purple) 48%, var(--ap-purple-deep));
  transition: opacity 420ms ease;
}

html.ap-ui .ap-art-open-cover.is-leaving {
  opacity: 0;
  pointer-events: none;
}

html.ap-ui .ap-art-open-cover section {
  width: min(78vw, 310px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

html.ap-ui .ap-opening-frame {
  width: min(68vw, 270px);
  aspect-ratio: 1;
  margin-bottom: 12px;
  padding: 12px;
  display: grid;
  place-items: center;
  border: 10px solid #fff;
  background: var(--ap-pearl);
  box-shadow: 0 10px 0 var(--ap-purple-base), 0 26px 42px rgba(42, 17, 82, 0.42);
  transform: rotate(-2deg);
}

html.ap-ui .ap-opening-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html.ap-ui .ap-art-open-cover strong {
  font-size: 22px;
  font-weight: 900;
  text-shadow: 0 3px 0 var(--ap-purple-base);
}

html.ap-ui .ap-art-open-cover span {
  font-size: 13px;
  font-weight: 800;
}

/* Final integration corrections.
   These selectors intentionally outrank the legacy IDs moved into the new
   shell. Keep the fixed sheets fixed, and keep the category rail a flex grid
   when menu.js clears its inline display value. */
html.ap-ui #category-bar {
  display: flex;
}

html.ap-ui #ap-more-sheet,
html.ap-ui #ap-wheel-sheet {
  position: fixed !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  margin-inline: auto !important;
}

html.ap-ui #settings-screen > div:nth-child(2) > #ap-settings-extra {
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.ap-ui #ap-settings-extra > .ap-section-label {
  min-height: 0 !important;
  margin: 22px 4px 9px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.ap-ui #ap-settings-extra > .ap-haptic-setting {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  display: flex;
}

html.ap-ui #ap-shop .shop-close .ap-icon {
  width: 22px !important;
  height: 22px !important;
}

html.ap-ui #ap-p3-celebration .ap-celebration-ribbon {
  animation: none !important;
  transform: none !important;
}

html.ap-ui #ap-more-sheet .ap-more-action {
  color: var(--ap-plum) !important;
  text-shadow: none !important;
  background: linear-gradient(to bottom, #fff, var(--ap-pearl) 54%, #e9e1f5) !important;
  box-shadow:
    inset 0 3px 0 #fff,
    inset 0 -2px 0 rgba(91, 61, 131, 0.1),
    0 5px 0 #c7b8dd,
    0 10px 16px rgba(59, 29, 100, 0.16) !important;
}

html.ap-ui #ap-more-sheet .ap-more-action.active {
  color: #fff !important;
  text-shadow: 0 2px 0 var(--ap-purple-base) !important;
  background: linear-gradient(to bottom, var(--ap-purple-lit), var(--ap-purple) 48%, var(--ap-purple-deep)) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.62),
    0 5px 0 var(--ap-purple-base),
    0 11px 17px rgba(59, 29, 100, 0.24) !important;
}

html.ap-ui #ap-more-sheet #p2-clear-all {
  color: #fff !important;
  text-shadow: 0 2px 0 var(--ap-pink-base) !important;
  background: linear-gradient(to bottom, var(--ap-pink-lit), var(--ap-pink) 48%, var(--ap-pink-deep)) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.62),
    0 5px 0 var(--ap-pink-base),
    0 11px 17px rgba(59, 29, 100, 0.24) !important;
}

html.ap-ui #ap-more-sheet .ap-more-action.active .ap-icon,
html.ap-ui #ap-more-sheet #p2-clear-all .ap-icon {
  color: #fff;
}

html.ap-ui #p3-outline-toggle,
html.ap-ui #p3-outline-toggle .ap-view-label {
  text-shadow: 0 1px 0 var(--ap-purple-base) !important;
}

/* Follow-up fixes: preserve the approved makeover while tightening layout,
   phase isolation, contextual painting controls, and responsive behavior. */
html.ap-ui {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

html.ap-ui body,
html.ap-ui #main-menu,
html.ap-ui #game-ui,
html.ap-ui #p3-screen {
  width: 100%;
  max-width: 100%;
}

html.ap-ui #main-area {
  width: auto !important;
  max-width: none;
  align-self: stretch;
  flex-basis: 0;
}

html.ap-ui #puzzle-container-wrapper {
  right: 0 !important;
  left: 0 !important;
  width: auto !important;
  max-width: 100%;
}

html.ap-ui #ap-p2-history,
html.ap-ui #ap-more-btn,
html.ap-ui body.ap-save-open #ap-p3-actions {
  display: none !important;
}

html.ap-ui body.ap-phase-2 #ap-p2-history {
  display: flex !important;
}

html.ap-ui body.ap-phase-2 #ap-more-btn {
  display: inline-flex !important;
}

html.ap-ui body.ap-phase-2 #ap-p1-help,
html.ap-ui body.ap-phase-2 #progress-pill,
html.ap-ui body.ap-phase-2 #header-title {
  display: none !important;
}

html.ap-ui button {
  line-height: 1;
  text-align: center;
}

html.ap-ui .ap-control,
html.ap-ui .ap-mould,
html.ap-ui .ap-primary,
html.ap-ui .ap-secondary,
html.ap-ui .ap-danger,
html.ap-ui .ap-btn,
html.ap-ui .hh-btn,
html.ap-ui .ap-icon-control,
html.ap-ui .ap-icon-mould,
html.ap-ui .hdr-icon,
html.ap-ui .ap-sheet-close,
html.ap-ui .help-x,
html.ap-ui #menu-settings-btn {
  align-items: center;
  justify-content: center;
}

html.ap-ui .ap-icon-control,
html.ap-ui .ap-icon-mould,
html.ap-ui .hdr-icon,
html.ap-ui .ap-sheet-close,
html.ap-ui .help-x,
html.ap-ui #menu-settings-btn {
  line-height: 0;
  display: inline-flex !important;
}

html.ap-ui button > .ap-icon {
  flex: 0 0 auto;
  align-self: center;
  vertical-align: middle;
}

html.ap-ui #hint-btn {
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1;
  display: inline-flex !important;
}

html.ap-ui #hint-btn .ap-icon,
html.ap-ui #ap-p1-actions #hint-btn .ap-icon,
html.ap-ui #hint-btn .ap-hint-count {
  margin: 0;
}

html.ap-ui #ap-more-btn {
  align-items: center;
  justify-content: center;
  line-height: 1;
  display: inline-flex;
}

html.ap-ui #ap-more-btn .ap-icon {
  margin: 0 auto;
  display: block;
}

html.ap-ui .ap-more-action {
  justify-content: center;
  text-align: center;
}

html.ap-ui #gem-pill {
  flex: 0 0 auto;
  max-width: min(44vw, 190px);
  overflow: visible;
  white-space: nowrap;
}

html.ap-ui #gem-count {
  min-width: max-content;
  overflow: visible;
  white-space: nowrap;
}

html.ap-ui #menu-header > div:first-child {
  min-width: 0;
}

html.ap-ui #puzzle-library {
  margin-bottom: calc(102px + var(--ap-safe-bottom)) !important;
  padding-bottom: 28px !important;
  scroll-padding-bottom: 24px;
}

html.ap-ui .nav-tab .nav-icon,
html.ap-ui .nav-tab .nav-label {
  position: relative;
  top: 2px;
  transform: none !important;
}

html.ap-ui .ap-settings-chevron {
  transform: translateX(-12px);
}

html.ap-ui #btn-toggle-3d > * {
  transform: translateX(1px);
}

html.ap-ui .ap-empty-state {
  grid-column: 1 / -1;
}

html.ap-ui .ap-empty-state > button {
  align-items: center;
  justify-content: center;
  gap: 8px;
  display: inline-flex !important;
}

html.ap-ui #btn-toggle-3d {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  display: none !important;
}

html.ap-ui body.ap-phase-2 #btn-toggle-3d:not(.hidden-phase) {
  display: inline-flex !important;
}

html.ap-ui .ap-save-sheet .ap-sheet-close > span {
  line-height: 1;
}

/* The existing setting controls now live beside the active paint tool. */
html.ap-ui #ap-inline-settings {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 5px 7px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  overflow: visible;
  border: 1px solid rgba(91, 61, 131, 0.18);
  border-radius: 15px;
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1px 3px rgba(59, 29, 100, 0.08),
    0 2px 7px rgba(59, 29, 100, 0.11);
  display: flex;
}

/* Size/Opacity sit directly on the dock. Keep Fill and Stamp cards intact. */
html.ap-ui #ap-inline-settings[data-tool="brush"],
html.ap-ui #ap-inline-settings[data-tool="spray"],
html.ap-ui #ap-inline-settings[data-tool="glitter"],
html.ap-ui #ap-inline-settings[data-tool="eraser"] {
  min-height: 34px;
  padding: 2px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html.ap-ui #ap-inline-settings > #p2-fill-options:not(.p2-context-visible),
html.ap-ui #ap-inline-settings > #p2-tool-settings:not(.p2-context-visible),
html.ap-ui #ap-inline-settings > #dock-settings-panel:not(.visible) {
  display: none !important;
}

html.ap-ui #ap-inline-settings > #p2-fill-options.p2-context-visible {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  display: grid !important;
}

html.ap-ui #ap-inline-settings .p2-fill-mode-btn {
  min-width: 0;
  min-height: 40px;
  padding: 6px 3px;
  border-radius: 12px;
  font-size: 11px;
}

html.ap-ui #ap-inline-settings > #p2-tool-settings.p2-context-visible {
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 5px;
  display: flex !important;
}

html.ap-ui #ap-inline-settings #p2-tool-settings > div {
  min-width: 0;
  margin: 0 3px !important;
  gap: 6px !important;
}

html.ap-ui #ap-inline-settings .p2-h-slider {
  width: clamp(76px, 24vw, 132px);
  min-width: 0;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

html.ap-ui #ap-inline-settings .p2-h-slider::-webkit-slider-runnable-track {
  height: 7px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 1px 2px rgba(59, 29, 100, 0.18);
}

html.ap-ui #ap-inline-settings .p2-h-slider::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border-width: 3px;
  box-shadow: 0 2px 0 var(--ap-pink-base), 0 4px 7px rgba(59, 29, 100, 0.2);
}

html.ap-ui #ap-inline-settings > #dock-settings-panel.visible {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 4px 5px;
  overflow-x: auto;
  border: 0;
  border-radius: 12px;
  background: #f8f4fc;
  box-shadow: inset 0 2px 5px rgba(59, 29, 100, 0.1);
  scrollbar-width: none;
  display: flex !important;
}

html.ap-ui #ap-inline-settings > #dock-settings-panel.visible::-webkit-scrollbar {
  display: none;
}

html.ap-ui #ap-inline-settings #dock-settings-panel .panel-row {
  width: max-content;
  min-width: 100%;
  flex-wrap: nowrap !important;
  justify-content: center;
}

html.ap-ui #ap-inline-settings .glitter-preset {
  min-width: max-content;
  min-height: 36px;
  padding: 5px 8px !important;
  border-radius: 10px;
  line-height: 1;
}

html.ap-ui #ap-inline-settings[data-tool="glitter"] > #dock-settings-panel.visible {
  flex: 1 1 auto;
  width: auto;
}

html.ap-ui #ap-inline-settings[data-tool="glitter"] #dock-settings-panel .panel-row {
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 4px;
  display: grid !important;
}

html.ap-ui #ap-inline-settings[data-tool="glitter"] #dock-settings-panel .panel-label {
  grid-column: 1 / -1;
  text-align: center;
}

html.ap-ui #ap-inline-settings[data-tool="glitter"] .glitter-preset {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 4px 3px !important;
  font-size: 8.5px;
  white-space: normal;
}

/* Glitter keeps its usable colors, without introducing a glossy gold marble. */
html.ap-ui #p2-bottom-area[data-tool="glitter"] #ap-shades .ap-shade {
  border-radius: 13px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.44),
    0 4px 0 rgba(59, 29, 100, 0.28),
    0 8px 11px rgba(59, 29, 100, 0.16);
  transform: none;
}

html.ap-ui #p2-bottom-area[data-tool="glitter"] #ap-shades .ap-shade-current {
  transform: translateY(-2px);
}

/* In paint mode the artwork itself is the white object, not a tall empty panel. */
html.ap-ui body.ap-phase-2 #main-area {
  border-color: transparent;
  background: transparent !important;
  box-shadow: none;
}

html.ap-ui body.ap-phase-2 #p2-workspace {
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  box-shadow:
    0 0 0 2px rgba(216, 204, 232, 0.86),
    0 8px 0 rgba(76, 29, 149, 0.28),
    0 18px 32px rgba(42, 17, 82, 0.26) !important;
}

/* Privacy stays useful inside the app before offering the full web policy. */
html.ap-ui body.ap-privacy-open #ap-privacy-sheet {
  opacity: 1;
  transform: translateY(0);
}

html.ap-ui #ap-privacy-sheet {
  max-width: 540px;
}

html.ap-ui .ap-privacy-summary {
  gap: 11px;
  display: grid;
}

html.ap-ui .ap-privacy-summary section {
  padding: 12px;
  grid-template-columns: 40px 1fr;
  align-items: start;
  gap: 10px;
  border: 2px solid #ded3ec;
  border-radius: 16px;
  background: linear-gradient(to bottom, #fff, #f4eef9);
  display: grid;
}

html.ap-ui .ap-privacy-summary section > span {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(to bottom, var(--ap-purple-lit), var(--ap-purple-deep));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.58), 0 4px 0 var(--ap-purple-base);
  display: grid;
  place-items: center;
}

html.ap-ui .ap-privacy-summary strong {
  color: var(--ap-plum);
  font-size: 13px;
  font-weight: 900;
}

html.ap-ui .ap-privacy-summary p {
  margin: 4px 0 0;
  color: var(--ap-muted);
  font-size: 11px;
  line-height: 1.38;
}

html.ap-ui .ap-privacy-summary > a {
  width: 100%;
  margin-top: 3px;
  text-decoration: none;
  display: inline-flex;
}

/* A focused purple gallery moment, with the artwork highlight untouched. */
html.ap-ui #p3-screen,
html.ap-ui .ap-gallery-screen {
  background:
    radial-gradient(ellipse 48% 43% at 50% 40%, rgba(255, 255, 255, 0.52), transparent 72%),
    radial-gradient(circle at 9% 0, rgba(233, 213, 255, 0.58), transparent 27%),
    radial-gradient(circle at 88% 88%, rgba(249, 168, 212, 0.44), transparent 36%),
    linear-gradient(155deg, #b9a5ff 0, #8b5cf6 34%, #7134d2 65%, #4c1d95 100%) !important;
}

html.ap-ui #p3-screen::before {
  opacity: 0.78;
  background:
    linear-gradient(112deg, transparent 0 28%, rgba(255, 255, 255, 0.13) 42%, transparent 56%),
    linear-gradient(248deg, transparent 0 29%, rgba(255, 255, 255, 0.1) 43%, transparent 57%),
    radial-gradient(ellipse 38% 46% at 50% 42%, rgba(255, 255, 255, 0.24), transparent 72%),
    radial-gradient(ellipse at 50% 48%, transparent 42%, rgba(55, 18, 104, 0.2) 100%);
}

html.ap-ui #p3-screen::after {
  height: 23%;
  border-top: 2px solid rgba(255, 255, 255, 0.28);
  background:
    radial-gradient(ellipse 42% 24% at 50% 2%, rgba(255, 255, 255, 0.24), transparent 68%),
    radial-gradient(ellipse 52% 58% at 50% 108%, rgba(249, 168, 212, 0.25), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(55, 22, 113, 0.28));
}

/* Museum quality reads as a premium print file, without leaving the brand. */
html.ap-ui .ap-save-museum,
html.ap-ui .ap-save-upsell {
  min-height: 72px;
  border-color: rgba(255, 255, 255, 0.96);
  background:
    radial-gradient(circle at 12% 0, rgba(255, 255, 255, 0.82), transparent 28%),
    linear-gradient(135deg, #f7f2ff 0, #e9dcff 46%, #fce7f3 100%);
  box-shadow:
    inset 0 3px 0 #fff,
    inset 0 -2px 0 rgba(91, 61, 131, 0.12),
    0 7px 0 var(--ap-purple-base),
    0 15px 24px rgba(59, 29, 100, 0.27);
}

html.ap-ui .ap-save-museum > .ap-icon,
html.ap-ui .ap-save-upsell > .ap-icon {
  width: 28px;
  height: 28px;
  color: var(--ap-purple-deep);
}

html.ap-ui .ap-save-upsell-kicker {
  width: max-content;
  margin-bottom: 4px;
  padding: 3px 7px;
  border-radius: 999px;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  background: linear-gradient(90deg, var(--ap-purple), var(--ap-pink));
  box-shadow: 0 3px 0 var(--ap-purple-base);
  display: block;
}

html.ap-ui .ap-save-upsell-price {
  background: linear-gradient(to bottom, var(--ap-purple-lit), var(--ap-purple-deep));
  box-shadow: 0 3px 0 var(--ap-purple-base);
  transform: translateX(8px);
}

html.ap-ui .ap-save-museum > .ap-icon {
  transform: none;
}

html.ap-ui .ap-save-museum > span {
  width: max-content;
  max-width: calc(100% - 38px);
  flex: 0 1 auto;
  transform: translateY(2px);
}

@media (max-width: 430px) {
  html.ap-ui #ap-inline-settings {
    padding-inline: 5px;
  }

  html.ap-ui #ap-inline-settings .p2-h-slider {
    width: clamp(70px, 22vw, 94px);
  }
}

@media (max-width: 380px) {
  html.ap-ui #menu-header {
    gap: 6px;
  }

  html.ap-ui #menu-header h1 {
    font-size: 27px !important;
  }

  html.ap-ui #gem-pill {
    min-width: 58px;
    padding-inline: 8px !important;
  }

  html.ap-ui .cat-pill {
    gap: 2px !important;
    font-size: 9px !important;
  }

  html.ap-ui .cat-pill .ap-icon {
    width: 14px;
    height: 14px;
  }

  html.ap-ui #p2-new-dock .p2-tool-btn {
    min-width: 42px !important;
  }

  html.ap-ui .ap-save-museum > .ap-icon {
    transform: translateX(6px);
  }

  html.ap-ui .ap-save-museum > span {
    transform: translate(6px, 2px);
  }

  html.ap-ui #ap-inline-settings .p2-fill-mode-btn {
    min-height: 38px;
    font-size: 10px;
  }
}

@media (min-width: 768px) {
  html.ap-ui #puzzle-library {
    padding-right: 24px !important;
    padding-left: 24px !important;
  }

  html.ap-ui #p3-display-canvas {
    max-width: min(64vw, 720px) !important;
    max-height: min(64vh, 720px) !important;
  }

  html.ap-ui .ap-fixed-sheet,
  html.ap-ui .ap-save-sheet {
    border-right-width: 5px;
    border-left-width: 5px;
  }
}

@media (min-width: 1024px) {
  html.ap-ui #puzzle-library {
    max-width: 1240px;
  }

  html.ap-ui #main-area {
    margin-right: 20px;
  }

  html.ap-ui #p3-display-canvas {
    max-width: min(68vw, 780px) !important;
    max-height: min(68vh, 780px) !important;
  }
}

@media (min-width: 1280px) {
  html.ap-ui body.ap-phase-2 #main-area {
    margin-left: 244px;
  }

  html.ap-ui #p2-new-dock {
    width: 210px !important;
    padding: 9px !important;
    gap: 4px !important;
  }

  html.ap-ui #p2-new-dock .p2-tool-btn {
    flex: 0 0 48px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 5px 10px !important;
    flex-direction: row;
    justify-content: flex-start;
    gap: 9px;
  }

  html.ap-ui #p2-new-dock .p2-tool-btn .ap-tool-label {
    width: auto;
    font-size: 10px;
    text-align: left;
  }

  html.ap-ui #p2-new-dock .p2-tool-btn.active {
    transform: translateX(8px) scale(1.02);
  }

  html.ap-ui #p2-new-dock > #ap-inline-settings {
    margin-top: 5px;
    padding: 7px;
    flex-direction: column;
  }

  html.ap-ui #p2-new-dock #p2-fill-options.p2-context-visible {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html.ap-ui #p2-new-dock #p2-tool-settings.p2-context-visible {
    width: 100%;
    flex-direction: column;
  }

  html.ap-ui #p2-new-dock #p2-tool-settings > div {
    width: 100%;
  }

  html.ap-ui #p2-new-dock .p2-h-slider {
    flex: 1 1 auto;
    width: auto;
  }

  html.ap-ui #p2-bottom-area {
    right: 34px !important;
    left: 258px !important;
    width: min(700px, calc(100% - 326px)) !important;
    max-width: 700px !important;
  }

  html.ap-ui #p3-display-canvas {
    max-width: min(61vw, 860px) !important;
    max-height: min(65vh, 800px) !important;
  }
}

@media (min-width: 1400px) {
  html.ap-ui #puzzle-library {
    max-width: 1320px;
  }

  html.ap-ui #puzzle-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 28px 22px !important;
  }

  html.ap-ui #p3-display-canvas {
    max-width: min(58vw, 920px) !important;
    max-height: min(67vh, 860px) !important;
  }
}

@media (max-height: 750px) {
  html.ap-ui #game-header {
    min-height: 52px !important;
    margin-top: 3px !important;
    margin-bottom: 4px !important;
    padding-block: 4px !important;
  }

  html.ap-ui #game-header .hdr-icon,
  html.ap-ui #ap-p2-history > button {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
  }

  html.ap-ui #p2-bottom-area {
    padding-block: 4px !important;
    gap: 3px !important;
  }

  html.ap-ui #ap-shades {
    min-height: 38px;
    padding-block: 0;
  }

  html.ap-ui #ap-shades .ap-shade {
    flex-basis: 38px;
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
  }

  html.ap-ui #ap-shades .ap-shade:nth-child(3) {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
  }

  html.ap-ui #ap-inline-settings {
    min-height: 40px;
    padding-block: 3px;
  }

  html.ap-ui #ap-inline-settings .p2-fill-mode-btn {
    min-height: 36px;
  }

  html.ap-ui #p2-new-dock .p2-tool-btn {
    height: 48px !important;
    min-height: 48px !important;
  }

  html.ap-ui #p3-scene {
    padding-top: calc(96px + var(--ap-safe-top)) !important;
    padding-bottom: calc(108px + var(--ap-safe-bottom)) !important;
  }

  html.ap-ui #p3-display-canvas {
    max-height: 48dvh !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  html.ap-ui #p2-new-dock .p2-tool-btn:hover,
  html.ap-ui .ap-more-action:hover,
  html.ap-ui .p2-fill-mode-btn:hover,
  html.ap-ui .ap-settings-link:hover {
    filter: brightness(1.055) saturate(1.06);
  }

  html.ap-ui #p2-new-dock .p2-tool-btn:not(.active):hover {
    transform: translateY(-2px);
  }
}

/* Round 4: replay history, daily reward calendar, and one composed celebration */
html.ap-ui #picker-completed-summary {
  min-height: 28px;
  margin: -5px auto 2px;
  padding: 5px 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px solid rgba(139, 92, 246, 0.12);
  border-radius: 999px;
  color: var(--ap-muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  background: rgba(255, 255, 255, 0.64);
}

html.ap-ui #picker-completed-summary.has-completions {
  border-color: rgba(16, 185, 129, 0.26);
  color: #12684f;
  background: linear-gradient(145deg, #f3fff9, #def8ec);
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 rgba(8, 124, 93, 0.2);
}

html.ap-ui #picker-completed-summary .ap-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

html.ap-ui #picker-completed-summary strong {
  font-weight: 900;
}

html.ap-ui .piece-opt {
  position: relative;
}

html.ap-ui .piece-opt.is-completed:not(.selected) {
  border-color: #c6f4e4;
  background: linear-gradient(to bottom, #fff, #f7fffb 52%, #dff6ed) !important;
  box-shadow:
    inset 0 3px 0 #fff,
    inset 0 -2px 0 rgba(8, 124, 93, 0.12),
    0 6px 0 #99d7c4,
    0 12px 18px rgba(38, 96, 78, 0.17);
}

html.ap-ui .piece-opt .gem-earned-mark {
  position: absolute !important;
  top: -8px !important;
  right: -5px !important;
  z-index: 4;
  min-height: 22px;
  margin: 0;
  padding: 3px 7px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 2px solid #fff !important;
  border-radius: 999px;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 0 #087c5d;
  white-space: nowrap;
  background: linear-gradient(to bottom, #72e8d3, #10b981 58%, #078060) !important;
  box-shadow: 0 3px 0 #087c5d, 0 7px 10px rgba(41, 89, 74, 0.24) !important;
  animation: ap-done-badge-in 360ms cubic-bezier(0.2, 0.9, 0.25, 1.22) both;
}

html.ap-ui .piece-opt .gem-earned-mark .ap-icon {
  width: 10px;
  height: 10px;
}

html.ap-ui .piece-opt.selected .gem-earned-mark {
  color: #4b3005 !important;
  text-shadow: none;
  background: linear-gradient(to bottom, #fff7a4, var(--ap-gold)) !important;
  box-shadow: 0 3px 0 #a66c12, 0 7px 10px rgba(59, 29, 100, 0.22) !important;
}

html.ap-ui .ap-streak-calendar-block {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 9px 9px 8px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.52);
  box-shadow: inset 0 2px 4px rgba(59, 29, 100, 0.09);
  display: block;
}

html.ap-ui .ap-streak-calendar-head {
  min-width: 0;
  margin-bottom: 7px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

html.ap-ui .ap-streak-calendar-head > strong {
  color: var(--ap-plum);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.1;
}

html.ap-ui .ap-streak-calendar-head > small {
  overflow: hidden;
  color: var(--ap-muted);
  font-size: 8px;
  font-weight: 800;
  line-height: 1.1;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.ap-ui .ap-streak-calendar {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

html.ap-ui .ap-streak-day {
  position: relative;
  min-width: 0;
  min-height: 54px;
  padding: 6px 2px 5px;
  overflow: visible;
  border: 2px solid #fff;
  border-radius: 11px;
  color: var(--ap-plum);
  text-align: center;
  background: linear-gradient(145deg, #fff, #eee6f8);
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 #c8b9df;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

html.ap-ui .ap-streak-day > small {
  max-width: 100%;
  overflow: hidden;
  color: currentColor;
  font-size: 7.5px;
  font-weight: 900;
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
  opacity: 0.7;
}

html.ap-ui .ap-streak-day-reward {
  margin-top: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

html.ap-ui .ap-streak-day-reward .ap-icon {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
}

html.ap-ui .ap-streak-day-reward > strong {
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

html.ap-ui .ap-streak-day > i {
  position: absolute;
  top: -5px;
  right: -4px;
  width: 15px;
  height: 15px;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #10b981;
  box-shadow: 0 2px 0 #087c5d;
  display: grid;
  place-items: center;
}

html.ap-ui .ap-streak-day > i .ap-icon {
  width: 8px;
  height: 8px;
}

html.ap-ui .ap-streak-day.is-done {
  color: #3f2674;
  background: linear-gradient(145deg, #f6f0ff, #dcd0f4);
}

html.ap-ui .ap-streak-day.is-today,
html.ap-ui .ap-streak-day.is-current {
  z-index: 2;
  color: #fff;
  border-color: #fff;
  transform: translateY(-2px);
  background: linear-gradient(155deg, var(--ap-pink-lit), var(--ap-pink) 48%, var(--ap-purple-deep));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.58),
    0 4px 0 var(--ap-pink-base),
    0 8px 12px rgba(89, 34, 114, 0.25);
  animation: ap-calendar-arrive 520ms cubic-bezier(0.2, 0.9, 0.25, 1.18) both;
}

html.ap-ui .ap-streak-day.is-today .ap-icon,
html.ap-ui .ap-streak-day.is-current .ap-icon {
  color: var(--ap-gold);
}

html.ap-ui .ap-streak-day.is-milestone:not(.is-today):not(.is-current) {
  border-color: #f6d66b;
  background: linear-gradient(145deg, #fffdf1, #f6e6ad);
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 #c5942d;
}

html.ap-ui #modal-overlay:not(.hidden-phase) #modal-box.ap-milestone-card {
  /* Was a 1.15 overshoot: a spring that snapped past its resting size and back.
     Read as a jolt on a screen the player reaches after a calm puzzle. This
     lifts to 1.02 instead, and the 70ms delay lets the backdrop arrive first so
     the card rises into a settled scene rather than racing it.
     `backwards` rather than `both` on purpose: with `both` the finished
     animation kept overriding the inline transform, so the closing scale-down
     never actually ran. */
  /* Delay raised from 70ms so the card's own fade cannot start before its
     contents have had a frame to rasterize. On a first completion the icons and
     text are being drawn for the first time, and a card that begins appearing
     too early shows as a blank white block. */
  /* 210ms, not 140ms. The card's clock starts when display:none is removed,
     but the scrim's does not start until two frames later, so at 140ms the card
     was beginning to show while the scrim was still only 70 percent down.
     Measured on the live site. This puts the card strictly after it. */
  animation: ap-achievement-card-in 380ms cubic-bezier(0.22, 0.86, 0.28, 1.02) 210ms backwards;
}

html.ap-ui #modal-box .ap-achievement-sparkles,
html.ap-ui .ap-daily-reward-card .ap-achievement-sparkles {
  position: absolute;
  inset: 2px;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 12% 20%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 86% 18%, #ffe878 0 3px, transparent 4px),
    radial-gradient(circle at 91% 62%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 16% 73%, #ff9ed3 0 3px, transparent 4px),
    radial-gradient(circle at 73% 88%, #c4b5fd 0 3px, transparent 4px);
  /* This layer used to scale 0.82 -> 1.08 and rotate while fading, which forced
     the browser to re-rasterize its five radial gradients at every new size.
     Measured over five runs each: it alone accounted for the first completion
     costing 144.5ms against 58.8ms with it removed, and it is the whole reason
     finishing the FIRST puzzle stuttered while later ones felt fine. Holding
     the transform still and fading only makes it as cheap as not being there
     (59.3ms), and the twinkle is intact. */
  animation: ap-achievement-sparkle 840ms ease-out 100ms both;
}

html.ap-ui #modal-box .ap-piece-achievement {
  animation: ap-achievement-number-in 520ms cubic-bezier(0.18, 0.9, 0.22, 1.18) 90ms both;
}

html.ap-ui #modal-box .ap-reward-chip {
  position: relative;
  overflow: hidden;
}

html.ap-ui #modal-box .ap-reward-chip::after {
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -36%;
  width: 24%;
  content: "";
  pointer-events: none;
  opacity: 0;
  transform: skewX(-18deg) translateX(0);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  animation: ap-reward-sheen 720ms ease-out 260ms both;
}

html.ap-ui #modal-box.has-daily-reward {
  width: min(100%, 450px);
  max-width: 450px !important;
  padding: 56px 18px 19px !important;
}

html.ap-ui #modal-box.has-daily-reward .ap-milestone-art {
  width: 62px;
  height: 62px;
  margin: -16px auto 8px;
}

html.ap-ui #modal-box.has-daily-reward .ap-milestone-art .ap-icon {
  width: 35px;
  height: 35px;
}

html.ap-ui #modal-box.has-daily-reward h2 {
  margin-bottom: 6px;
  font-size: clamp(26px, 7vw, 34px) !important;
}

html.ap-ui #modal-box.has-daily-reward .ap-piece-achievement {
  min-height: 88px;
  margin-bottom: 8px;
}

html.ap-ui #modal-box.has-daily-reward .ap-piece-achievement strong {
  font-size: clamp(48px, 14vw, 64px);
}

html.ap-ui #modal-box.has-daily-reward .ap-reward-chip,
html.ap-ui #modal-box.has-daily-reward .ap-reward-note {
  margin: 8px 0;
  padding: 7px 11px;
}

html.ap-ui .ap-completion-daily {
  margin: 9px 0 11px;
  padding: 9px;
  overflow: visible;
  border: 3px solid #fff;
  border-radius: 19px;
  color: var(--ap-plum);
  text-align: left;
  background:
    radial-gradient(circle at 5% 0, #fff 0, transparent 32%),
    linear-gradient(145deg, #fff8d6, #f9e6b6 42%, #eadcf9);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.72),
    0 4px 0 #c49a3b,
    0 9px 14px rgba(59, 29, 100, 0.17);
}

html.ap-ui .ap-completion-daily > header {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

html.ap-ui .ap-completion-daily-seal {
  width: 34px;
  height: 34px;
  border: 2px solid #fff;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(to bottom, var(--ap-pink-lit), var(--ap-pink-deep));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 3px 0 var(--ap-pink-base);
  display: grid;
  place-items: center;
}

html.ap-ui .ap-completion-daily-seal .ap-icon {
  width: 19px;
  height: 19px;
}

html.ap-ui .ap-completion-daily header > span:nth-child(2) {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

html.ap-ui .ap-completion-daily header small {
  color: var(--ap-muted);
  font-size: 8px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

html.ap-ui .ap-completion-daily header strong {
  overflow: hidden;
  color: var(--ap-plum);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.ap-ui .ap-completion-daily-gems {
  min-height: 32px;
  padding: 5px 8px;
  border: 2px solid #fff;
  border-radius: 11px;
  color: #583807;
  background: linear-gradient(to bottom, #fff9b5, var(--ap-gold));
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 #a66c12;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

html.ap-ui .ap-completion-daily-gems .ap-icon {
  width: 15px;
  height: 15px;
}

html.ap-ui .ap-completion-daily-gems b {
  font-size: 13px;
  font-weight: 900;
}

html.ap-ui .ap-completion-daily-calendar {
  margin-top: 9px;
  padding-top: 7px;
  border-top: 1px solid rgba(83, 51, 126, 0.13);
}

html.ap-ui .ap-completion-daily .ap-streak-calendar-head {
  margin-bottom: 6px;
}

html.ap-ui .ap-completion-daily .ap-streak-day {
  min-height: 46px;
  padding-block: 5px 4px;
}

html.ap-ui .ap-completion-daily .ap-streak-day-reward {
  margin-top: 4px;
}

html.ap-ui .ap-daily-complete > section.ap-daily-reward-card {
  position: relative;
  width: min(100%, 410px);
  padding: 20px 18px 18px;
  overflow: visible;
  border: 5px solid #fff;
  border-radius: 30px;
  color: var(--ap-plum);
  text-align: left;
  background:
    radial-gradient(circle at 12% 0, #fff 0, transparent 36%),
    linear-gradient(145deg, #fff, var(--ap-pearl) 55%, #f3ddea);
  box-shadow:
    inset 0 4px 0 #fff,
    0 8px 0 #c5b5df,
    0 22px 40px rgba(42, 17, 82, 0.4);
  animation: ap-achievement-card-in 420ms cubic-bezier(0.18, 0.9, 0.22, 1.15) both;
}

html.ap-ui .ap-daily-complete-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

html.ap-ui .ap-daily-complete-seal {
  width: 52px;
  height: 52px;
  border: 3px solid #fff;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(to bottom, var(--ap-pink-lit), var(--ap-pink-deep));
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.58),
    0 5px 0 var(--ap-pink-base),
    0 10px 14px rgba(59, 29, 100, 0.22);
  display: grid;
  place-items: center;
}

html.ap-ui .ap-daily-complete-seal .ap-icon {
  width: 29px;
  height: 29px;
}

html.ap-ui .ap-daily-complete-head > span:last-child {
  min-width: 0;
}

html.ap-ui .ap-daily-complete-head small {
  color: var(--ap-pink-deep);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

html.ap-ui .ap-daily-complete-head h2 {
  margin: 2px 0 0;
  color: var(--ap-plum);
  font-size: clamp(25px, 7vw, 32px);
  font-weight: 900;
  line-height: 1.05;
}

html.ap-ui .ap-daily-reward-card .ap-daily-badges {
  margin: 15px 0 11px;
  gap: 8px;
}

html.ap-ui .ap-daily-reward-card .ap-daily-badges > span {
  min-height: 56px;
  padding: 8px;
  border: 2px solid #fff;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  justify-content: start;
  column-gap: 5px;
  text-align: left;
  background: linear-gradient(145deg, #fff, #ece3f7);
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 #c8b9df;
}

html.ap-ui .ap-daily-reward-card .ap-daily-badges > span.is-gem {
  background: linear-gradient(145deg, #fffbe0, #f4d77c);
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 #b47b18;
}

html.ap-ui .ap-daily-reward-card .ap-daily-badges .ap-icon {
  grid-row: 1 / 3;
  width: 22px;
  height: 22px;
  align-self: center;
}

html.ap-ui .ap-daily-reward-card .ap-daily-badges small {
  color: var(--ap-muted);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

html.ap-ui .ap-daily-reward-card .ap-daily-badges strong {
  font-size: 14px;
  line-height: 1.1;
}

html.ap-ui .ap-daily-calendar-panel {
  padding: 10px;
  border: 2px solid #fff;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 2px 4px rgba(59, 29, 100, 0.1);
}

html.ap-ui .ap-daily-reward-card > p {
  margin: 14px 0 12px;
  color: var(--ap-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}

html.ap-ui .ap-daily-reward-card > button {
  width: 100%;
  display: flex;
}

@keyframes ap-done-badge-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ap-calendar-arrive {
  from {
    opacity: 0.55;
    transform: translateY(2px) scale(0.86);
  }
  to {
    opacity: 1;
    transform: translateY(-2px) scale(1);
  }
}

@keyframes ap-achievement-card-in {
  from {
    opacity: 0;
    transform: scale(0.88) translateY(14px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes ap-achievement-number-in {
  from {
    opacity: 0.35;
    transform: scale(0.84);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ap-achievement-sparkle {
  0% {
    opacity: 0;
  }
  38% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
  }
}

@keyframes ap-reward-sheen {
  0% {
    opacity: 0;
    transform: skewX(-18deg) translateX(0);
  }
  25% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: skewX(-18deg) translateX(700%);
  }
}

@media (max-width: 380px) {
  html.ap-ui #ap-daily-streak {
    grid-template-columns: 44px minmax(0, 1fr) minmax(66px, auto);
    gap: 8px;
    padding: 10px;
  }

  html.ap-ui .ap-streak-seal {
    width: 42px;
    height: 42px;
  }

  html.ap-ui .ap-streak-reward {
    min-width: 66px;
    min-height: 70px;
    padding-inline: 4px;
  }

  html.ap-ui .ap-streak-calendar-block {
    padding-inline: 6px;
  }

  html.ap-ui .ap-streak-calendar {
    gap: 3px;
  }

  html.ap-ui .ap-streak-day {
    min-height: 50px;
    padding-inline: 1px;
    border-radius: 9px;
  }

  html.ap-ui .ap-streak-day > small {
    font-size: 7px;
  }

  html.ap-ui .ap-streak-day-reward > strong {
    font-size: 9px;
  }

  html.ap-ui #modal-box.has-daily-reward {
    padding-inline: 13px !important;
  }

  html.ap-ui .ap-completion-daily {
    padding-inline: 7px;
  }

  html.ap-ui .ap-completion-daily .ap-streak-calendar {
    gap: 2px;
  }

  html.ap-ui .ap-completion-daily .ap-streak-day {
    min-height: 44px;
    border-radius: 8px;
  }

  html.ap-ui .ap-streak-calendar-head > small {
    max-width: 56%;
  }
}

@media (max-height: 700px) {
  html.ap-ui #modal-overlay.has-daily-reward {
    align-items: flex-start !important;
    overflow-y: auto;
    padding-top: 26px;
    padding-bottom: 32px;
  }

  html.ap-ui #modal-box.has-daily-reward {
    padding-top: 51px !important;
  }

  html.ap-ui #modal-box.has-daily-reward .ap-milestone-art {
    width: 54px;
    height: 54px;
  }

  html.ap-ui #modal-box.has-daily-reward .ap-piece-achievement {
    min-height: 78px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.ap-ui #modal-box .ap-achievement-sparkles,
  html.ap-ui .ap-daily-reward-card .ap-achievement-sparkles {
    display: none;
  }

  html.ap-ui #modal-overlay:not(.hidden-phase) #modal-box.ap-milestone-card,
  html.ap-ui #modal-box .ap-piece-achievement,
  html.ap-ui #modal-box .ap-reward-chip::after,
  html.ap-ui .piece-opt .gem-earned-mark,
  html.ap-ui .ap-streak-day.is-today,
  html.ap-ui .ap-streak-day.is-current,
  html.ap-ui .ap-daily-complete > section.ap-daily-reward-card {
    animation: none !important;
  }
}

/* Readability pass: the three Phase 1 actions and modal purchase actions use
   the same centered icon/label rhythm at a comfortably readable phone size. */
html.ap-ui #ap-p1-actions > button,
html.ap-ui #ap-p1-actions > .ap-control {
  min-height: 54px;
  gap: 5px;
  font-size: 13px !important;
  line-height: 1.1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

html.ap-ui #ap-p1-actions .ap-icon {
  width: 22px;
  height: 22px;
  margin: 0;
}

html.ap-ui #ap-p1-actions .ap-control-label {
  line-height: 1.1;
}

html.ap-ui #ap-p1-actions .ap-hint-count {
  min-width: 19px;
  margin: 0;
  padding: 3px 5px;
  font-size: 11px;
}

html.ap-ui .ap-overlay .ap-btn {
  min-height: 54px;
  padding: 12px 14px;
  gap: 9px;
  font-size: 16px !important;
  line-height: 1.15;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

html.ap-ui .ap-overlay .ap-btn > .ap-icon {
  width: 24px;
  height: 24px;
  margin: 0;
}

html.ap-ui .ap-overlay .ap-btn > span {
  min-width: 0;
  line-height: 1.15;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html.ap-ui .ap-unlock-lock .ap-icon {
  margin: 0;
  display: block;
}

html.ap-ui .ap-unlock-values strong .ap-icon {
  width: 20px;
  height: 20px;
  margin: 0;
}

@media (max-width: 380px) {
  html.ap-ui #ap-p1-actions > button,
  html.ap-ui #ap-p1-actions > .ap-control {
    gap: 4px;
    font-size: 12px !important;
  }
}

/* Multiple exact Phase 1 resumes: the newest run stays in the established
   hero, with the remaining runs in a compact sculpted rail below it. */
html.ap-ui #home-hero {
  width: calc(100% - 4px);
  max-width: calc(100% - 4px);
  min-width: 0;
  box-sizing: border-box;
}

html.ap-ui #home-hero[data-mode="continue"] {
  background:
    radial-gradient(circle at 88% 10%, rgba(255, 190, 225, 0.48), transparent 31%),
    linear-gradient(145deg, #fff 0, #f9f1ff 48%, #efe3ff 100%) !important;
}

html.ap-ui #home-hero[data-mode="continue"] .hh-sub {
  line-height: 1.25;
}

html.ap-ui #home-hero .hh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html.ap-ui #home-hero:focus-visible {
  outline: 3px solid rgba(236, 72, 153, 0.58);
  outline-offset: 3px;
}

html.ap-ui #continue-another {
  position: relative;
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 8px;
  padding: 13px 12px 15px;
  overflow: hidden;
  box-sizing: border-box;
  border: 3px solid rgba(255, 255, 255, 0.94);
  border-radius: 24px;
  background:
    radial-gradient(circle at 94% -10%, rgba(249, 168, 212, 0.44), transparent 38%),
    linear-gradient(150deg, #fff 0, #f8f1ff 55%, #eee3fb 100%);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.98),
    inset 0 -3px 0 rgba(101, 69, 145, 0.09),
    0 6px 0 #c4b1df,
    0 13px 22px rgba(59, 29, 100, 0.2);
}

html.ap-ui #continue-another,
html.ap-ui #continue-another * {
  box-sizing: border-box;
}

html.ap-ui .phase1-resume-heading {
  min-width: 0;
  margin: 0 2px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

html.ap-ui .phase1-resume-heading h2 {
  min-width: 0;
  margin: 0;
  color: var(--ap-plum);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.15px;
}

html.ap-ui .phase1-resume-count {
  min-width: 25px;
  height: 25px;
  padding: 0 7px;
  display: inline-grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(to bottom, var(--ap-pink-lit), var(--ap-pink-deep));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    0 3px 0 var(--ap-pink-base),
    0 6px 10px rgba(98, 28, 86, 0.2);
}

html.ap-ui .phase1-resume-rail {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 1px 3px 8px;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: 3px;
  scroll-snap-type: inline proximity;
  scrollbar-color: rgba(139, 92, 246, 0.55) rgba(222, 210, 239, 0.7);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

html.ap-ui .phase1-resume-rail::-webkit-scrollbar {
  height: 6px;
}

html.ap-ui .phase1-resume-rail::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(222, 210, 239, 0.72);
}

html.ap-ui .phase1-resume-rail::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ap-purple), var(--ap-pink));
}

html.ap-ui .phase1-resume-item {
  width: min(286px, calc(100% - 18px));
  min-width: 0;
  flex: 0 0 min(286px, calc(100% - 18px));
  scroll-snap-align: start;
}

html.ap-ui .phase1-resume-card {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 9px;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 3px solid #fff;
  border-radius: 19px;
  color: var(--ap-plum);
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
  background: linear-gradient(145deg, #fff 0, #fbf6ff 54%, #f0e5fb 100%);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.98),
    inset 0 -2px 0 rgba(91, 58, 139, 0.1),
    0 4px 0 #bca7db,
    0 9px 14px rgba(59, 29, 100, 0.17);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

html.ap-ui .phase1-resume-card:hover {
  transform: translateY(-2px);
  border-color: #fff;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.98),
    0 6px 0 #ae95d4,
    0 13px 20px rgba(59, 29, 100, 0.22);
}

html.ap-ui .phase1-resume-card:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 2px 3px rgba(84, 48, 130, 0.12),
    0 1px 0 #a991cc,
    0 5px 9px rgba(59, 29, 100, 0.16);
}

html.ap-ui .phase1-resume-card:focus-visible {
  border-color: var(--ap-pink-lit);
  box-shadow:
    0 0 0 3px rgba(236, 72, 153, 0.28),
    0 4px 0 #9f83ca,
    0 10px 18px rgba(59, 29, 100, 0.22);
}

html.ap-ui .phase1-resume-thumb {
  width: 76px;
  height: 76px;
  border: 3px solid #fff;
  border-radius: 15px;
  background-color: #e9ddf7;
  background-position: center;
  background-size: cover;
  box-shadow:
    inset 0 4px 8px rgba(59, 29, 100, 0.13),
    0 4px 0 #c9b8df,
    0 8px 12px rgba(59, 29, 100, 0.16);
}

html.ap-ui .phase1-resume-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-content: center;
}

html.ap-ui .phase1-resume-title {
  display: block;
  overflow: hidden;
  color: var(--ap-plum);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.ap-ui .phase1-resume-meta {
  margin-top: 5px;
  display: block;
  color: var(--ap-muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

html.ap-ui .phase1-resume-bar {
  width: 100%;
  height: 8px;
  margin-top: 8px;
  padding: 2px;
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background: #ddd2eb;
  box-shadow: inset 0 2px 3px rgba(59, 29, 100, 0.15);
}

html.ap-ui .phase1-resume-fill {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ap-purple), var(--ap-pink));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
}

@media (min-width: 360px) and (max-width: 430px) {
  html.ap-ui #home-hero {
    gap: 9px !important;
    padding: 10px !important;
  }

  html.ap-ui #home-hero .hh-thumb {
    width: 80px !important;
    height: 80px !important;
    flex-basis: 80px !important;
  }

  html.ap-ui #home-hero .hh-title {
    font-size: 14px !important;
  }

  html.ap-ui #home-hero .hh-sub {
    font-size: 10.5px !important;
  }

  html.ap-ui #home-hero .hh-btn {
    min-width: 66px;
    padding-inline: 9px !important;
    font-size: 10.5px !important;
  }

  html.ap-ui #continue-another {
    padding: 12px 9px 14px;
  }

  html.ap-ui .phase1-resume-rail {
    gap: 10px;
    padding-inline: 2px;
  }

  html.ap-ui .phase1-resume-item {
    width: calc(100% - 12px);
    flex-basis: calc(100% - 12px);
  }

  html.ap-ui .phase1-resume-card {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 9px;
    padding: 8px;
  }

  html.ap-ui .phase1-resume-thumb {
    width: 68px;
    height: 68px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.ap-ui .phase1-resume-card {
    transition: none;
  }
}