:root {
  color-scheme: light;
  --ink: #2a2340;
  --muted: #705b87;
  --pink: #ff6fae;
  --purple: #8b5cf6;
  --yellow: #ffe579;
  --mint: #68ddb0;
  --sky: #82dcff;
  --panel: rgba(255, 255, 255, 0.88);
  --shadow: 0 18px 40px rgba(84, 49, 120, 0.18);
}

* {
  box-sizing: border-box;
}

html {
  background: #fff5bb;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: ui-rounded, "SF Pro Rounded", "Comic Sans MS", system-ui, sans-serif;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 111, 174, 0.55) 0 78px, transparent 80px),
    radial-gradient(circle at 88% 16%, rgba(104, 221, 176, 0.6) 0 88px, transparent 90px),
    radial-gradient(circle at 78% 84%, rgba(139, 92, 246, 0.28) 0 118px, transparent 120px),
    linear-gradient(135deg, #fff0a6 0%, #ffc4dc 42%, #9fe9ff 100%);
}

body::before {
  position: fixed;
  inset: 0;
  pointer-events: none;
  content: "";
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.8) 0 2px, transparent 2.5px),
    radial-gradient(circle, rgba(255, 111, 174, 0.2) 0 3px, transparent 3.5px);
  background-position: 0 0, 38px 46px;
  background-size: 76px 76px, 118px 118px;
}

a {
  color: inherit;
  text-decoration: none;
}

.page-shell {
  position: relative;
  width: min(1220px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(34px, 7vw, 72px) 0;
}

.page-header {
  margin-bottom: clamp(24px, 5vw, 44px);
  text-align: center;
}

.eyebrow {
  margin: clamp(38px, 6vw, 64px) 0 0;
  color: #7b3ec3;
  font-size: clamp(0.9rem, 2vw, 1rem);
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1 {
  display: grid;
  justify-items: center;
  max-width: 14ch;
  margin: 0 auto;
  font-size: clamp(3.2rem, 11vw, 8rem);
  line-height: 0.92;
  letter-spacing: 0;
}

h1 span {
  white-space: nowrap;
}

.game-tabs {
  display: inline-flex;
  max-width: 100%;
  gap: 3px;
  margin-top: clamp(24px, 4vw, 36px);
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 6px rgba(84, 49, 120, 0.05);
}

.game-tabs + .eyebrow {
  margin-top: 22px;
}

.game-tab-item {
  position: relative;
}

.game-tab-tooltip {
  position: absolute;
  z-index: 5;
  bottom: calc(100% + 10px);
  left: 50%;
  display: grid;
  gap: 4px;
  width: max-content;
  max-width: min(230px, calc(100vw - 40px));
  padding: 12px 17px;
  border: 1px solid #e2d7ea;
  border-radius: 13px;
  background: #fffdf9;
  color: #49365c;
  box-shadow: 0 6px 20px rgba(62, 37, 85, 0.13), 0 1px 3px rgba(62, 37, 85, 0.05);
  font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  line-height: 1.35;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

.game-tab-tooltip > span {
  color: #7c698b;
  font-size: 10px;
  font-weight: 550;
}

.game-tab-tooltip > strong {
  font-size: 12px;
  font-weight: 750;
}

.game-tab-tooltip::after {
  position: absolute;
  bottom: -5px;
  left: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-right: 1px solid #e2d7ea;
  border-bottom: 1px solid #e2d7ea;
  background: #fffdf9;
  transform: rotate(45deg);
  content: "";
}

/* Keep the tooltip open as the pointer crosses the gap to its text. */
.game-tab-tooltip::before {
  position: absolute;
  inset: 100% 0 -12px;
  content: "";
}

.game-tab-item:not([data-tooltip-dismissed]):is(:hover, :has(.game-tab:focus-visible)) .game-tab-tooltip {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
}

.game-tabs:has(.game-tab-item:hover) .game-tab-item:not(:hover) .game-tab-tooltip {
  visibility: hidden;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .game-tab-tooltip {
    transition: none;
  }
}

.game-tab {
  min-height: 32px;
  padding: 6px 15px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #705b87;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.game-tab:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.4);
}

.game-tab[aria-selected="true"] {
  color: #fff;
  background: #84649f;
  box-shadow: 0 1px 3px rgba(84, 49, 120, 0.1);
}

.game-tab:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.game-tabs[hidden],
.game-grid[hidden] {
  display: none;
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(250px, 1fr));
  gap: clamp(16px, 3vw, 26px);
}

.game-grid + .game-grid:not([hidden]) {
  margin-top: 26px;
}

.game-grid[hidden] + .game-grid {
  margin-top: 0;
}

.game-card {
  display: grid;
  min-height: 440px;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 5px solid rgba(255, 255, 255, 0.82);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  transition: transform 150ms ease, filter 150ms ease;
}

.game-card:hover,
.game-card:focus-visible {
  transform: translateY(-4px);
  filter: saturate(1.08);
  outline: none;
}

.game-art {
  position: relative;
  aspect-ratio: 1000 / 562;
  min-height: 0;
  overflow: hidden;
}

.game-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #fffdf5;
}

.salon-card .game-art {
  background:
    radial-gradient(circle at 12% 16%, rgba(255, 210, 63, 0.76) 0 42px, transparent 44px),
    radial-gradient(circle at 90% 12%, rgba(53, 183, 255, 0.62) 0 54px, transparent 56px),
    linear-gradient(135deg, #ffe772 0%, #ff8ca8 42%, #73ddf8 100%);
}

.dress-card .game-art {
  background:
    radial-gradient(circle at 14% 13%, rgba(255, 211, 61, 0.84) 0 48px, transparent 50px),
    radial-gradient(circle at 87% 17%, rgba(53, 200, 115, 0.68) 0 58px, transparent 60px),
    linear-gradient(135deg, #ff8fc3 0%, #88e7ff 50%, #fff0a8 100%);
}

.shower-card .game-art {
  background:
    radial-gradient(circle at 12% 14%, rgba(255, 226, 105, 0.9) 0 48px, transparent 50px),
    radial-gradient(circle at 88% 17%, rgba(255, 112, 173, 0.58) 0 58px, transparent 60px),
    linear-gradient(135deg, #7ee7ff 0%, #dffaff 48%, #ffc8e2 100%);
}

.forest-card .game-art {
  background:
    radial-gradient(circle at 13% 14%, #fff7a8 0 45px, transparent 47px),
    linear-gradient(#8ee3ff 0 39%, #dbffd0 39% 58%, #8add70 58% 100%);
}

.city-card .game-art {
  background:
    linear-gradient(#86e3ff 0 52%, #dff7ff 52% 61%, #74bf68 61% 72%, #56607a 72% 100%);
}

.dragon-card .game-art {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 211, 110, 0.86) 0 46px, transparent 48px),
    linear-gradient(180deg, #58c9ff 0 48%, #9ee8ff 48% 72%, #fff6b8 100%);
}

.climb-card .game-art {
  background:
    radial-gradient(circle at 14% 14%, rgba(255, 214, 109, 0.9) 0 48px, transparent 50px),
    linear-gradient(180deg, #84dcfb 0%, #d6f7ff 46%, #c18b66 46%, #e0b28c 100%);
}

.coloring-card .game-art {
  background:
    linear-gradient(90deg, #fffdf5 0 calc(100% - 78px), #fff8dd calc(100% - 78px) 100%);
}

.brush-card .game-art {
  background:
    radial-gradient(circle at 13% 15%, rgba(255, 227, 105, 0.92) 0 48px, transparent 50px),
    radial-gradient(circle at 88% 16%, rgba(117, 224, 255, 0.72) 0 58px, transparent 60px),
    linear-gradient(135deg, #98e8ff 0%, #fff2a7 48%, #ffc5df 100%);
}

.piano-card .game-art {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 18px, transparent 18px 36px),
    linear-gradient(135deg, #ffe66d 0%, #ff8dbb 32%, #7fe8ff 66%, #b4f7bd 100%);
}

.math-card .game-art {
  background:
    radial-gradient(circle at 16% 14%, rgba(255, 229, 111, 0.88) 0 50px, transparent 52px),
    radial-gradient(circle at 86% 16%, rgba(56, 207, 209, 0.62) 0 58px, transparent 60px),
    linear-gradient(135deg, #9be8ff 0%, #fff0a6 42%, #ffd0e0 70%, #d7ffc3 100%);
}

.grocery-card .game-art {
  background:
    radial-gradient(circle at 14% 15%, rgba(255, 225, 106, 0.9) 0 48px, transparent 50px),
    radial-gradient(circle at 87% 17%, rgba(130, 223, 178, 0.74) 0 58px, transparent 60px),
    linear-gradient(135deg, #a8e7ff 0%, #fff2a0 42%, #ffc9dc 72%, #c8f5cf 100%);
}

.camera-card .game-art {
  background:
    radial-gradient(circle at 15% 14%, rgba(255, 230, 109, 0.86) 0 48px, transparent 50px),
    radial-gradient(circle at 86% 16%, rgba(98, 223, 173, 0.72) 0 58px, transparent 60px),
    linear-gradient(135deg, #7ee7ff 0%, #fff08e 43%, #ffafd5 100%);
}

.cupcake-card .game-art {
  background:
    radial-gradient(circle at 14% 15%, rgba(255, 228, 112, 0.9) 0 48px, transparent 50px),
    radial-gradient(circle at 87% 17%, rgba(97, 212, 255, 0.74) 0 58px, transparent 60px),
    linear-gradient(135deg, #86e6ff 0%, #fff0a6 42%, #ffb7d5 72%, #bdf4c8 100%);
}

.santa-card .game-art {
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 246, 201, 0.9) 0 48px, transparent 50px),
    linear-gradient(180deg, #102a55 0%, #286899 56%, #dffbff 100%);
}

.soup-card .game-art {
  background:
    radial-gradient(circle at 14% 15%, rgba(255, 228, 112, 0.92) 0 48px, transparent 50px),
    radial-gradient(circle at 86% 17%, rgba(96, 218, 246, 0.76) 0 58px, transparent 60px),
    linear-gradient(135deg, #a7eeff 0%, #fff0a6 38%, #ffb582 66%, #ffc6dc 100%);
}

.work-card .game-art {
  background:
    radial-gradient(circle at 14% 15%, rgba(255, 220, 81, 0.9) 0 48px, transparent 50px),
    radial-gradient(circle at 88% 17%, rgba(18, 191, 166, 0.68) 0 58px, transparent 60px),
    linear-gradient(135deg, #88e2ff 0%, #f9f6a8 46%, #ffc2d9 100%);
}

.jellyfish-card .game-art {
  background:
    radial-gradient(circle at 14% 15%, rgba(255, 226, 109, 0.9) 0 48px, transparent 50px),
    radial-gradient(circle at 87% 17%, rgba(255, 112, 183, 0.64) 0 58px, transparent 60px),
    linear-gradient(135deg, #64ddff 0%, #dcfbff 38%, #ffe8a3 68%, #ffa6cf 100%);
}

.homeward-card .game-art {
  background:
    radial-gradient(circle at 14% 15%, rgba(255, 226, 109, 0.9) 0 48px, transparent 50px),
    radial-gradient(circle at 87% 17%, rgba(255, 117, 156, 0.62) 0 58px, transparent 60px),
    linear-gradient(135deg, #83ddff 0%, #d8fbff 38%, #a8ec89 64%, #efc98d 100%);
}

.laundry-card .game-art {
  background:
    radial-gradient(circle at 14% 15%, rgba(255, 225, 106, 0.9) 0 48px, transparent 50px),
    radial-gradient(circle at 87% 17%, rgba(100, 185, 63, 0.65) 0 58px, transparent 60px),
    linear-gradient(135deg, #a8ecff 0%, #d9f7e1 42%, #fff2a5 72%, #ffc8dc 100%);
}

.lives-card .game-art {
  background: linear-gradient(135deg, #8de7ff 0%, #efe4ff 50%, #ffc9df 100%);
}

.camera-art {
  display: grid;
  place-items: center;
}

.piano-art {
  display: grid;
  place-items: center;
}

.dress-art {
  display: grid;
  place-items: center;
}

.shower-art {
  display: grid;
  place-items: center;
}

.dress-preview {
  position: relative;
  width: min(78%, 290px);
  height: 230px;
}

.dress-preview-face {
  position: absolute;
  z-index: 2;
  top: 36px;
  left: 50%;
  width: 94px;
  height: 104px;
  border-radius: 50% 50% 46% 46%;
  background:
    radial-gradient(circle at 34% 54%, #2a2340 0 5px, transparent 6px),
    radial-gradient(circle at 66% 54%, #2a2340 0 5px, transparent 6px),
    radial-gradient(ellipse at 50% 70%, transparent 0 16px, #2a2340 17px 20px, transparent 21px),
    #f0bd89;
  box-shadow: inset 0 -7px 0 rgba(42, 35, 64, 0.1);
  transform: translateX(-50%);
}

.dress-preview-hair {
  position: absolute;
  z-index: 3;
  top: 24px;
  left: 50%;
  width: 118px;
  height: 74px;
  border-radius: 58px 58px 32px 32px;
  background:
    radial-gradient(circle at 14px 54px, #2b1711 0 21px, transparent 22px),
    radial-gradient(circle at 36px 38px, #2b1711 0 24px, transparent 25px),
    radial-gradient(circle at 78px 38px, #2b1711 0 24px, transparent 25px),
    radial-gradient(circle at 104px 54px, #2b1711 0 21px, transparent 22px);
  transform: translateX(-50%);
}

.dress-preview-body {
  position: absolute;
  top: 120px;
  left: 50%;
  width: 96px;
  height: 84px;
  border-radius: 42px 42px 22px 22px;
  background: #f0bd89;
  transform: translateX(-50%);
}

.dress-preview-outfit {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 14px;
  width: 158px;
  height: 120px;
  background:
    radial-gradient(circle at 30% 31%, rgba(255, 255, 255, 0.82) 0 7px, transparent 8px),
    radial-gradient(circle at 63% 51%, rgba(255, 255, 255, 0.82) 0 7px, transparent 8px),
    radial-gradient(circle at 45% 72%, rgba(255, 255, 255, 0.82) 0 7px, transparent 8px),
    linear-gradient(135deg, #ff5fa2, #6b5cff);
  clip-path: polygon(31% 0, 69% 0, 94% 100%, 6% 100%);
  filter: drop-shadow(0 10px 0 rgba(42, 35, 64, 0.12));
  transform: translateX(-50%);
}

.dress-preview-shoe {
  position: absolute;
  z-index: 5;
  bottom: 0;
  width: 48px;
  height: 22px;
  border-radius: 999px;
  background: #20b8ff;
  box-shadow: inset 0 -5px 0 rgba(42, 35, 64, 0.14);
}

.dress-preview-shoe.left {
  left: 78px;
}

.dress-preview-shoe.right {
  right: 78px;
}

.dress-preview-crown {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 50%;
  width: 88px;
  height: 42px;
  background: #ffd33d;
  clip-path: polygon(0 100%, 14% 18%, 34% 82%, 50% 0, 66% 82%, 86% 18%, 100% 100%);
  filter: drop-shadow(0 7px 0 rgba(42, 35, 64, 0.12));
  transform: translateX(-50%);
}

.dress-preview-spark {
  position: absolute;
  width: 36px;
  height: 36px;
  clip-path: polygon(50% 0, 62% 34%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 38% 34%);
}

.dress-preview-spark.one {
  top: 36px;
  left: 16px;
  background: #ffd33d;
}

.dress-preview-spark.two {
  right: 8px;
  bottom: 46px;
  background: #35c873;
}

.shower-preview {
  position: relative;
  width: min(82%, 320px);
  height: 232px;
}

.shower-preview-head {
  position: absolute;
  top: 6px;
  right: 32px;
  width: 102px;
  height: 56px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 26% 70%, #377f9c 0 5px, transparent 6px),
    radial-gradient(circle at 44% 72%, #377f9c 0 5px, transparent 6px),
    radial-gradient(circle at 62% 72%, #377f9c 0 5px, transparent 6px),
    linear-gradient(#8ac6da, #5ca4c2);
  box-shadow: -38px -12px 0 -17px #8ac6da, 0 8px 0 rgba(42, 35, 64, 0.12);
  transform: rotate(8deg);
}

.shower-preview-water {
  position: absolute;
  top: 62px;
  width: 9px;
  height: 98px;
  border-radius: 999px;
  background: rgba(32, 184, 255, 0.62);
}

.shower-preview-water.one {
  right: 82px;
  transform: rotate(13deg);
}

.shower-preview-water.two {
  right: 112px;
  height: 116px;
  transform: rotate(18deg);
}

.shower-preview-face {
  position: absolute;
  z-index: 3;
  top: 60px;
  left: 50%;
  width: 84px;
  height: 92px;
  border-radius: 50% 50% 46% 46%;
  background:
    radial-gradient(circle at 34% 52%, #243049 0 5px, transparent 6px),
    radial-gradient(circle at 66% 52%, #243049 0 5px, transparent 6px),
    radial-gradient(ellipse at 50% 70%, transparent 0 13px, #243049 14px 17px, transparent 18px),
    #f0bd89;
  box-shadow: inset 0 -7px 0 rgba(42, 35, 64, 0.1);
  transform: translateX(-50%);
}

.shower-preview-hair {
  position: absolute;
  z-index: 4;
  top: 48px;
  left: 50%;
  width: 106px;
  height: 62px;
  border-radius: 54px 54px 28px 28px;
  background:
    radial-gradient(circle at 18px 48px, #5a321d 0 18px, transparent 19px),
    radial-gradient(circle at 36px 32px, #5a321d 0 22px, transparent 23px),
    radial-gradient(circle at 70px 32px, #5a321d 0 22px, transparent 23px),
    radial-gradient(circle at 91px 48px, #5a321d 0 18px, transparent 19px);
  transform: translateX(-50%);
}

.shower-preview-body {
  position: absolute;
  z-index: 2;
  top: 142px;
  left: 50%;
  width: 94px;
  height: 66px;
  border-radius: 42px 42px 18px 18px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0 18%, transparent 18% 36%, rgba(255, 255, 255, 0.55) 36% 54%, transparent 54% 72%, rgba(255, 255, 255, 0.55) 72% 90%, transparent 90%),
    #20b8ff;
  transform: translateX(-50%);
}

.shower-preview-arm {
  position: absolute;
  z-index: 1;
  top: 154px;
  width: 28px;
  height: 62px;
  border-radius: 999px;
  background: #f0bd89;
}

.shower-preview-arm.left {
  left: calc(50% - 78px);
  transform: rotate(22deg);
}

.shower-preview-arm.right {
  right: calc(50% - 78px);
  transform: rotate(-22deg);
}

.shower-preview-tub {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 0;
  width: 256px;
  height: 72px;
  border-radius: 40px 40px 24px 24px;
  background:
    radial-gradient(ellipse at 50% 4%, #dff8ff 0 46%, transparent 47%),
    linear-gradient(#ffffff, #e8f9ff);
  box-shadow: 0 10px 0 rgba(42, 35, 64, 0.12);
  transform: translateX(-50%);
}

.shower-preview-bubble {
  position: absolute;
  z-index: 6;
  border-radius: 50%;
  background: white;
  box-shadow: inset -5px -6px 0 rgba(32, 184, 255, 0.14), 0 5px 0 rgba(42, 35, 64, 0.08);
}

.shower-preview-bubble.one {
  left: 44px;
  bottom: 42px;
  width: 34px;
  height: 34px;
}

.shower-preview-bubble.two {
  left: 118px;
  bottom: 54px;
  width: 44px;
  height: 44px;
}

.shower-preview-bubble.three {
  right: 48px;
  bottom: 44px;
  width: 38px;
  height: 38px;
}

.shower-preview-duck {
  position: absolute;
  z-index: 7;
  right: 50px;
  bottom: 22px;
  width: 58px;
  height: 34px;
  border-radius: 50% 54% 44% 42%;
  background: #ffbd45;
  box-shadow: inset 0 -6px 0 rgba(42, 35, 64, 0.1);
}

.shower-preview-duck::before {
  position: absolute;
  top: -15px;
  right: 3px;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: #ffbd45;
  content: "";
}

.shower-preview-duck::after {
  position: absolute;
  top: -4px;
  right: -12px;
  width: 18px;
  height: 10px;
  border-radius: 999px;
  background: #ff8a3d;
  content: "";
}

.math-art {
  display: grid;
  place-items: center;
}

.math-preview {
  position: relative;
  width: min(82%, 320px);
  height: 216px;
}

.math-mini-card {
  position: absolute;
  left: 50%;
  display: grid;
  place-items: center;
  width: 150px;
  height: 56px;
  border: 5px solid rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  color: #243049;
  background: linear-gradient(135deg, var(--card-color), #ffffff);
  box-shadow: 0 8px 0 rgba(42, 35, 64, 0.12), 0 14px 24px rgba(42, 35, 64, 0.18);
  font-size: 1.35rem;
  font-weight: 1000;
  transform: translateX(-50%) rotate(var(--tilt));
}

.math-mini-card.one {
  --card-color: #ff8dbb;
  --tilt: -5deg;
  bottom: 18px;
}

.math-mini-card.two {
  --card-color: #ffe66d;
  --tilt: 4deg;
  bottom: 62px;
}

.math-mini-card.three {
  --card-color: #7fe8ff;
  --tilt: -3deg;
  bottom: 106px;
}

.math-mini-card.four {
  --card-color: #b4f7bd;
  --tilt: 3deg;
  bottom: 150px;
}

.math-flag {
  position: absolute;
  top: 0;
  left: 50%;
  width: 10px;
  height: 60px;
  border-radius: 999px;
  background: #2a2340;
  transform: translateX(-50%);
}

.math-flag::after {
  position: absolute;
  top: 0;
  left: 8px;
  width: 58px;
  height: 34px;
  border-radius: 8px 8px 8px 0;
  background: linear-gradient(135deg, #ff6fae, #ffb84a);
  content: "";
}

.math-spark {
  position: absolute;
  width: 32px;
  height: 32px;
  clip-path: polygon(50% 0, 62% 34%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 38% 34%);
}

.math-spark.one {
  top: 18px;
  left: 18px;
  background: #ff6fae;
}

.math-spark.two {
  right: 14px;
  bottom: 44px;
  background: #68ddb0;
}

.piano-preview {
  position: relative;
  width: min(84%, 340px);
  height: 178px;
  border: 5px solid rgba(255, 255, 255, 0.88);
  border-radius: 8px;
  background: linear-gradient(90deg, #ff6fae, #ffb84a, #ffe579, #68ddb0, #82dcff, #8b5cf6);
  box-shadow: 0 14px 0 rgba(42, 35, 64, 0.12), 0 22px 30px rgba(42, 35, 64, 0.18);
}

.preview-key {
  position: absolute;
  bottom: 13px;
  border-radius: 8px;
}

.preview-key.white {
  width: 11%;
  height: 118px;
  background: linear-gradient(#fff, #fff8e6);
  box-shadow: inset 0 -8px 0 rgba(42, 35, 64, 0.1), 0 5px 0 rgba(42, 35, 64, 0.12);
}

.preview-key.black {
  z-index: 2;
  width: 7%;
  height: 74px;
  background: linear-gradient(#30354d, #101520);
  box-shadow: 0 5px 0 rgba(42, 35, 64, 0.18);
}

.preview-key.one {
  left: 5%;
}

.preview-key.two {
  left: 16.6%;
}

.preview-key.three {
  left: 28.2%;
}

.preview-key.four {
  left: 39.8%;
}

.preview-key.five {
  left: 51.4%;
}

.preview-key.six {
  left: 63%;
}

.preview-key.seven {
  left: 74.6%;
}

.preview-key.eight {
  left: 86.2%;
}

.preview-key.black.one {
  left: 13%;
}

.preview-key.black.two {
  left: 24.6%;
}

.preview-key.black.three {
  left: 47.8%;
}

.preview-key.black.four {
  left: 59.4%;
}

.preview-key.black.five {
  left: 71%;
}

.preview-note {
  position: absolute;
  top: 12px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 3.3rem;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 5px 0 rgba(42, 35, 64, 0.1);
}

.preview-note.one {
  left: 22px;
  transform: rotate(-10deg);
}

.preview-note.two {
  right: 28px;
  transform: rotate(8deg);
}

.camera-window {
  position: relative;
  width: min(78%, 310px);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 5px solid rgba(255, 255, 255, 0.94);
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0 14px, rgba(255, 255, 255, 0.06) 14px 28px),
    linear-gradient(135deg, #382675 0%, #1c64d8 47%, #23cbd7 100%);
  box-shadow: 0 16px 0 rgba(43, 33, 80, 0.12), 0 22px 34px rgba(43, 33, 80, 0.18);
}

.camera-face {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 118px;
  height: 130px;
  border-radius: 50% 50% 44% 44%;
  background: #f1b47d;
  box-shadow:
    -38px -12px 0 -19px #3c281a,
    38px -12px 0 -19px #3c281a,
    inset 0 -9px 0 rgba(0, 0, 0, 0.1);
  transform: translateX(-50%);
}

.camera-eye {
  position: absolute;
  z-index: 2;
  top: 78px;
  width: 62px;
  height: 52px;
  border: 5px solid #2a2340;
  border-radius: 50%;
  background:
    radial-gradient(circle at 54% 55%, #2a2340 0 8px, #64d8ff 9px 17px, #fff 18px);
  box-shadow: 0 5px 0 rgba(42, 35, 64, 0.18);
}

.camera-eye.left {
  left: calc(50% - 70px);
}

.camera-eye.right {
  right: calc(50% - 70px);
  background:
    radial-gradient(circle at 54% 55%, #2a2340 0 8px, #ff5aa5 9px 17px, #fff 18px);
}

.camera-smile {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 50px;
  width: 48px;
  height: 20px;
  border-bottom: 6px solid #2a2340;
  border-radius: 0 0 50px 50px;
  transform: translateX(-50%);
}

.camera-rainbow {
  position: absolute;
  top: 22px;
  left: 30px;
  width: 118px;
  height: 68px;
  border: 13px solid #ff5aa5;
  border-bottom: 0;
  border-radius: 90px 90px 0 0;
  box-shadow: inset 0 11px 0 #ffe66d, inset 0 22px 0 #62dfad;
  transform: rotate(-8deg);
}

.camera-bubble {
  position: absolute;
  border: 5px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset -7px -9px 0 rgba(255, 255, 255, 0.16);
}

.camera-bubble.one {
  right: 32px;
  top: 28px;
  width: 48px;
  height: 48px;
}

.camera-bubble.two {
  right: 82px;
  bottom: 38px;
  width: 34px;
  height: 34px;
}

.camera-bubble.three {
  left: 35px;
  bottom: 34px;
  width: 28px;
  height: 28px;
}

.camera-dial {
  position: absolute;
  bottom: 18px;
  width: 38px;
  height: 38px;
  border: 5px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 7px 0 rgba(42, 35, 64, 0.13);
}

.camera-dial.one {
  left: 28px;
  background: #ff5aa5;
}

.camera-dial.two {
  left: 76px;
  background: #ffe66d;
}

.camera-dial.three {
  left: 124px;
  background: #62dfad;
}

.game-copy {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 10px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.88);
}

.game-copy h2 {
  min-height: 1.9em;
  margin: 0;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 0.95;
  letter-spacing: 0;
}

.game-copy p {
  min-height: 4.05em;
  margin: 0;
  color: var(--muted);
  font-size: 1.06rem;
  font-weight: 850;
  line-height: 1.35;
}

.game-copy span {
  display: inline-grid;
  place-items: center;
  min-width: 92px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  color: white;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.13);
  font-weight: 950;
}

.salon-mirror {
  position: absolute;
  inset: 58px 86px 22px 18px;
  border: 5px solid rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.34)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.26) 0 14px, rgba(255, 255, 255, 0.08) 14px 28px);
  box-shadow: 0 12px 0 rgba(45, 44, 70, 0.1);
}

.salon-topbar {
  position: absolute;
  inset: 0 0 auto;
  height: 42px;
  background: rgba(255, 255, 255, 0.68);
}

.salon-brand {
  position: absolute;
  top: 8px;
  left: 12px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: white;
  background: #ef4d7a;
  font-weight: 950;
}

.salon-meter {
  position: absolute;
  top: 14px;
  right: 96px;
  width: 70px;
  height: 13px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2fc5ff, #8dde63, #ffd23f, #ff5c8a);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.72);
}

.salon-profile {
  position: absolute;
  top: 46px;
  left: 76px;
  width: 118px;
  height: 22px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 -3px 0 rgba(45, 44, 70, 0.08);
}

.salon-controls {
  position: absolute;
  top: 55px;
  right: 14px;
  width: 58px;
  height: 146px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 17px 18px, #ffffff 0 12px, transparent 13px),
    radial-gradient(circle at 41px 18px, #ffffff 0 12px, transparent 13px),
    radial-gradient(circle at 17px 50px, #ffffff 0 12px, transparent 13px),
    radial-gradient(circle at 41px 50px, #ffffff 0 12px, transparent 13px),
    radial-gradient(circle at 18px 91px, #3f2618 0 9px, transparent 10px),
    radial-gradient(circle at 40px 91px, #35b7ff 0 9px, transparent 10px),
    radial-gradient(circle at 18px 116px, #ffd23f 0 9px, transparent 10px),
    radial-gradient(circle at 40px 116px, #b45cff 0 9px, transparent 10px),
    rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 26px rgba(38, 36, 70, 0.16);
}

.salon-face {
  position: absolute;
  left: 50%;
  bottom: 34px;
  width: 124px;
  height: 132px;
  border: 5px solid #8a5a3a;
  border-radius: 52% 52% 46% 46%;
  background: #f2b880;
  transform: translateX(-68%);
}

.salon-face::before,
.salon-face::after {
  position: absolute;
  top: 54px;
  width: 11px;
  height: 15px;
  border-radius: 50%;
  background: #2f2440;
  content: "";
}

.salon-face::before {
  left: 32px;
}

.salon-face::after {
  right: 32px;
}

.salon-hair {
  position: absolute;
  left: 50%;
  bottom: 132px;
  width: 156px;
  height: 112px;
  border-radius: 78px 78px 38px 38px;
  background: #3f2618;
  box-shadow:
    -50px 38px 0 -10px #3f2618,
    50px 38px 0 -10px #3f2618,
    inset 0 -14px 0 rgba(0, 0, 0, 0.12);
  transform: translateX(-68%);
}

.salon-smile {
  position: absolute;
  left: 50%;
  bottom: 78px;
  width: 38px;
  height: 18px;
  border-bottom: 5px solid #2f2440;
  border-radius: 0 0 40px 40px;
  transform: translateX(-68%);
}

.salon-mustache {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 66px;
  width: 74px;
  height: 28px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 28% 48%, #3f2618 0 29px, transparent 30px),
    radial-gradient(ellipse at 72% 48%, #3f2618 0 29px, transparent 30px);
  transform: translateX(-68%);
}

.salon-tool {
  position: absolute;
  top: 74px;
  right: 24px;
  color: #ee3f86;
  font-size: 2rem;
  filter: drop-shadow(0 7px 0 rgba(95, 68, 150, 0.14));
  transform: rotate(12deg);
}

.sun {
  position: absolute;
  top: 28px;
  left: 34px;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: #ffe579;
  box-shadow: 0 0 0 14px rgba(255, 229, 121, 0.32);
}

.forest-topbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  height: 44px;
  background: rgba(255, 255, 255, 0.52);
}

.forest-topbar::before {
  position: absolute;
  top: 9px;
  left: 12px;
  width: 28px;
  height: 28px;
  border: 3px solid #fff7d2;
  border-radius: 12px;
  background: linear-gradient(145deg, #2f8f47, #9fda4e);
  box-shadow: 0 5px 0 rgba(22, 99, 57, 0.16);
  content: "";
}

.forest-topbar::after {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 68px;
  height: 24px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: -78px 0 0 rgba(255, 240, 168, 0.85);
  content: "";
}

.forest-cloud {
  position: absolute;
  z-index: 1;
  width: 86px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    22px -12px 0 4px rgba(255, 255, 255, 0.86),
    48px -5px 0 6px rgba(255, 255, 255, 0.86);
}

.forest-cloud-one {
  top: 72px;
  left: 52px;
}

.forest-cloud-two {
  top: 62px;
  right: 88px;
  transform: scale(0.74);
}

.forest-rainbow {
  position: absolute;
  z-index: 1;
  top: 58px;
  left: 50%;
  width: 190px;
  height: 106px;
  border: 18px solid #ff6fae;
  border-bottom: 0;
  border-radius: 120px 120px 0 0;
  transform: translateX(-50%);
}

.forest-rainbow::before,
.forest-rainbow::after {
  position: absolute;
  border-bottom: 0;
  border-radius: inherit;
  content: "";
}

.forest-rainbow::before {
  inset: 18px;
  border: 14px solid #ffe579;
  border-bottom: 0;
}

.forest-rainbow::after {
  inset: 48px;
  border: 12px solid #68ddb0;
  border-bottom: 0;
}

.forest-hills {
  position: absolute;
  inset: auto -10px 64px;
  height: 88px;
  background:
    radial-gradient(80% 110% at 18% 100%, #60bf5e 0 48%, transparent 49%),
    radial-gradient(80% 100% at 56% 100%, #73cf66 0 55%, transparent 56%),
    radial-gradient(80% 100% at 90% 100%, #4eb457 0 52%, transparent 53%);
}

.tree {
  position: absolute;
  bottom: 54px;
  width: 72px;
  height: 118px;
  z-index: 3;
}

.tree::before {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 20px;
  height: 72px;
  border-radius: 10px;
  background: #875527;
  content: "";
  transform: translateX(-50%);
}

.tree::after {
  position: absolute;
  left: 50%;
  top: 0;
  width: 96px;
  height: 98px;
  border-radius: 50% 50% 42% 42%;
  background: #2f9148;
  box-shadow: inset 0 -12px 0 rgba(0, 0, 0, 0.12);
  content: "";
  transform: translateX(-50%);
}

.tree-one {
  left: 17%;
}

.tree-two {
  left: 50%;
  bottom: 74px;
  transform: scale(1.18);
}

.tree-two::after {
  background: #65b83f;
}

.tree-three {
  right: 17%;
  transform: scale(0.9);
}

.pond {
  position: absolute;
  right: 28px;
  bottom: 20px;
  width: 128px;
  height: 48px;
  border-radius: 50%;
  background: #65cbe6;
  box-shadow: inset 0 8px 0 rgba(255, 255, 255, 0.34);
}

.forest-toolbar {
  position: absolute;
  inset: auto 18px 14px 18px;
  z-index: 6;
  height: 38px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 28px 19px, #2f8f47 0 12px, transparent 13px),
    radial-gradient(circle at 74px 19px, #8b5a2b 0 12px, transparent 13px),
    radial-gradient(circle at 120px 19px, #65cbe6 0 12px, transparent 13px),
    radial-gradient(circle at 166px 19px, #ffd86b 0 12px, transparent 13px),
    rgba(255, 250, 240, 0.88);
  box-shadow: 0 8px 0 rgba(63, 79, 33, 0.15);
}

.city-sun {
  position: absolute;
  top: 28px;
  right: 36px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #ffe579;
  box-shadow: 0 0 0 13px rgba(255, 229, 121, 0.32);
}

.city-hud {
  position: absolute;
  z-index: 5;
  top: 12px;
  right: 12px;
  width: 116px;
  height: 34px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0 35px, transparent 35px 41px, rgba(255, 255, 255, 0.8) 41px 76px, transparent 76px 82px, rgba(255, 255, 255, 0.8) 82px 100%);
  box-shadow: 0 8px 18px rgba(23, 48, 71, 0.16);
}

.building {
  position: absolute;
  bottom: 78px;
  border-radius: 8px 8px 0 0;
  box-shadow: inset 0 -10px 0 rgba(0, 0, 0, 0.12);
}

.building::before {
  position: absolute;
  inset: 18px 14px;
  content: "";
  background:
    linear-gradient(90deg, #fff4a8 0 12px, transparent 12px 28px, #fff4a8 28px 40px),
    linear-gradient(90deg, #fff4a8 0 12px, transparent 12px 28px, #fff4a8 28px 40px);
  background-position: 0 0, 0 34px;
  background-repeat: no-repeat;
}

.building-one {
  left: 18px;
  width: 76px;
  height: 132px;
  background: #8b5cf6;
}

.building-two {
  left: 94px;
  width: 92px;
  height: 168px;
  background: #ff6fae;
}

.building-three {
  right: 18px;
  width: 86px;
  height: 118px;
  background: #42bfe8;
}

.city-car {
  position: absolute;
  z-index: 2;
  left: 28px;
  bottom: 34px;
  width: 88px;
  height: 30px;
  border-radius: 16px 20px 10px 10px;
  background: #ff526f;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.12);
}

.city-car::before {
  position: absolute;
  left: 22px;
  top: -16px;
  width: 42px;
  height: 22px;
  border-radius: 16px 16px 0 0;
  background: #ffc738;
  content: "";
}

.city-car::after {
  position: absolute;
  left: 13px;
  bottom: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #252437;
  box-shadow: 48px 0 0 #252437;
  content: "";
}

.city-star {
  position: absolute;
  z-index: 4;
  top: 92px;
  left: 54%;
  width: 24px;
  height: 24px;
  background: #ffd23f;
  clip-path: polygon(50% 0, 62% 35%, 100% 36%, 70% 57%, 80% 92%, 50% 72%, 20% 92%, 30% 57%, 0 36%, 38% 35%);
}

.city-duck {
  position: absolute;
  z-index: 3;
  bottom: 78px;
  width: 28px;
  height: 18px;
  border-radius: 50% 50% 40% 40%;
  background: #ffd23f;
}

.city-duck::before {
  position: absolute;
  top: -10px;
  right: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffd23f;
  content: "";
}

.city-duck::after {
  position: absolute;
  top: -4px;
  right: -5px;
  width: 10px;
  height: 6px;
  border-radius: 50%;
  background: #ff9b3d;
  content: "";
}

.duck-one {
  right: 98px;
}

.duck-two {
  right: 62px;
  transform: scale(0.82);
}

.road {
  position: absolute;
  inset: auto 0 0;
  height: 70px;
  background:
    repeating-linear-gradient(90deg, transparent 0 34px, #ffe579 34px 74px, transparent 74px 112px),
    #544d63;
}

.runner-head {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 112px;
  width: 46px;
  height: 46px;
  border: 4px solid #784b31;
  border-radius: 50%;
  background: #f2b880;
  transform: translateX(-50%);
}

.runner-head::before,
.runner-head::after {
  position: absolute;
  top: 17px;
  width: 5px;
  height: 7px;
  border-radius: 50%;
  background: #2f2440;
  content: "";
}

.runner-head::before {
  left: 13px;
}

.runner-head::after {
  right: 13px;
}

.runner-body {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 60px;
  width: 48px;
  height: 62px;
  border-radius: 22px 22px 12px 12px;
  background: #ff6fae;
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.12);
  transform: translateX(-50%) rotate(-6deg);
}

.runner-leg {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 36px;
  width: 16px;
  height: 52px;
  border-radius: 999px;
  background: #423753;
  transform-origin: top center;
}

.runner-leg-left {
  transform: translateX(-26px) rotate(32deg);
}

.runner-leg-right {
  transform: translateX(12px) rotate(-28deg);
}

.dragon-body {
  position: absolute;
  z-index: 3;
  left: 43%;
  bottom: 92px;
  width: 138px;
  height: 58px;
  border-radius: 50px 64px 52px 42px;
  background: #62c85f;
  box-shadow: inset 0 -12px 0 rgba(0, 0, 0, 0.12);
  transform: translateX(-50%) rotate(-5deg);
}

.dragon-head {
  position: absolute;
  z-index: 4;
  left: 59%;
  bottom: 126px;
  width: 66px;
  height: 52px;
  border-radius: 48px 52px 36px 34px;
  background: #68ddb0;
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.11);
}

.dragon-head::before {
  position: absolute;
  top: 18px;
  right: 15px;
  width: 8px;
  height: 10px;
  border-radius: 50%;
  background: #2f2440;
  content: "";
}

.dragon-head::after {
  position: absolute;
  top: -15px;
  left: 14px;
  width: 38px;
  height: 22px;
  clip-path: polygon(0 100%, 18% 0, 42% 100%, 68% 0, 100% 100%);
  background: #ffe579;
  content: "";
}

.dragon-wing {
  position: absolute;
  z-index: 2;
  left: 34%;
  bottom: 132px;
  width: 92px;
  height: 76px;
  clip-path: polygon(0 100%, 22% 10%, 54% 54%, 88% 0, 100% 100%);
  background: #ff6fae;
  box-shadow: inset 0 -10px 0 rgba(0, 0, 0, 0.12);
  transform: rotate(-8deg);
}

.dragon-tail {
  position: absolute;
  z-index: 2;
  left: 19%;
  bottom: 104px;
  width: 98px;
  height: 28px;
  border-radius: 999px 0 0 999px;
  background: #55b954;
  transform: rotate(18deg);
}

.dragon-hud {
  position: absolute;
  z-index: 6;
  top: 12px;
  right: 12px;
  width: 154px;
  height: 30px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.7) 0 44px, transparent 44px 52px, rgba(255,255,255,.7) 52px 100px, transparent 100px 108px, rgba(255,255,255,.7) 108px 100%);
  box-shadow: 0 8px 18px rgba(23, 50, 73, 0.18);
}

.dragon-mountain {
  position: absolute;
  bottom: 28px;
  width: 220px;
  height: 130px;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  background: #69b6b3;
  opacity: 0.75;
}

.mountain-one {
  left: -28px;
}

.mountain-two {
  right: 56px;
  bottom: 44px;
  width: 260px;
  height: 150px;
  background: #4d93b5;
  opacity: 0.55;
}

.dragon-trail {
  position: absolute;
  z-index: 1;
  left: 20px;
  width: 190px;
  height: 8px;
  border-radius: 999px;
}

.trail-one {
  top: 130px;
  background: #ff6658;
  box-shadow: 0 12px 0 #ffd36e, 0 24px 0 #63d2a2;
}

.trail-two {
  top: 154px;
  background: #58c9ff;
  box-shadow: 0 12px 0 #7b61ff;
}

.trail-three {
  top: 178px;
  background: rgba(255, 255, 255, 0.65);
}

.dragon-rider {
  position: absolute;
  z-index: 7;
  left: 42%;
  bottom: 142px;
  width: 22px;
  height: 32px;
  border-radius: 12px 12px 8px 8px;
  background: #ff6658;
  box-shadow: 0 -20px 0 -2px #ffcc9f;
}

.dragon-rider::before {
  position: absolute;
  left: -4px;
  top: -23px;
  width: 30px;
  height: 17px;
  border-radius: 18px 18px 8px 8px;
  background: #201417;
  content: "";
}

.dragon-tail::before {
  position: absolute;
  left: -18px;
  top: -5px;
  width: 30px;
  height: 38px;
  clip-path: polygon(100% 50%, 0 0, 20% 50%, 0 100%);
  background: #ff6fae;
  content: "";
}

.fire {
  position: absolute;
  z-index: 5;
  border-radius: 50% 50% 50% 0;
  background: #ff7a2f;
  transform: rotate(-18deg);
}

.fire-one {
  right: 24px;
  bottom: 132px;
  width: 104px;
  height: 42px;
  border-radius: 60% 50% 50% 60%;
  clip-path: polygon(0 50%, 32% 0, 100% 30%, 38% 52%, 100% 78%, 32% 100%);
}

.fire-two {
  right: 62px;
  bottom: 142px;
  width: 58px;
  height: 24px;
  border-radius: 60% 50% 50% 60%;
  background: #ffe579;
}

.fire-three {
  right: 20px;
  bottom: 150px;
  width: 38px;
  height: 20px;
  border-radius: 60% 50% 50% 60%;
  background: #ff4d7f;
}

.ice-block {
  position: absolute;
  border: 5px solid rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), transparent 45%),
    #9beaff;
  box-shadow: inset 0 -8px 0 rgba(57, 150, 192, 0.18), 0 10px 0 rgba(72, 88, 128, 0.12);
}

.ice-one {
  right: 28px;
  bottom: 88px;
  width: 60px;
  height: 60px;
  transform: rotate(6deg);
}

.ice-two {
  right: 106px;
  bottom: 52px;
  width: 48px;
  height: 48px;
  transform: rotate(-9deg);
}

.coloring-paper {
  position: absolute;
  inset: 14px 84px 14px 14px;
  border: 5px solid #172033;
  border-radius: 14px;
  background:
    repeating-linear-gradient(90deg, rgba(23, 32, 51, 0.05) 0 2px, transparent 2px 34px),
    repeating-linear-gradient(0deg, rgba(23, 32, 51, 0.05) 0 2px, transparent 2px 34px),
    #fffdf5;
}

.color-sun {
  position: absolute;
  top: 38px;
  left: 42px;
  width: 52px;
  height: 52px;
  border: 5px solid #172033;
  border-radius: 50%;
  background: #fffdf5;
  box-shadow: 0 0 0 12px rgba(255, 229, 121, 0.25);
}

.color-building {
  position: absolute;
  z-index: 2;
  bottom: 76px;
  border: 5px solid #172033;
  border-radius: 8px 8px 0 0;
  background: #fffdf5;
  box-shadow: none;
}

.color-building::before {
  position: absolute;
  inset: 20px 12px;
  content: "";
  background:
    linear-gradient(90deg, #ffffff 0 12px, transparent 12px 25px, #ffffff 25px 37px),
    linear-gradient(90deg, #ffffff 0 12px, transparent 12px 25px, #ffffff 25px 37px);
  background-position: 0 0, 0 34px;
  background-repeat: no-repeat;
}

.color-building-one {
  left: 34px;
  width: 70px;
  height: 102px;
}

.color-building-two {
  left: 112px;
  width: 88px;
  height: 148px;
}

.color-building-three {
  left: 210px;
  width: 78px;
  height: 118px;
}

.color-road {
  position: absolute;
  z-index: 1;
  left: 18px;
  right: 88px;
  bottom: 32px;
  height: 54px;
  border-top: 5px solid #172033;
  background: #fffdf5;
}

.color-road::before {
  position: absolute;
  top: 24px;
  left: 26px;
  right: 26px;
  height: 8px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, #172033 0 30px, transparent 30px 54px);
  content: "";
}

.color-car {
  position: absolute;
  z-index: 3;
  left: 122px;
  bottom: 45px;
  width: 96px;
  height: 30px;
  border: 5px solid #172033;
  border-radius: 18px 18px 10px 10px;
  background: #fffdf5;
}

.color-car::before {
  position: absolute;
  top: -24px;
  left: 24px;
  width: 44px;
  height: 26px;
  border: 5px solid #172033;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background: #fffdf5;
  content: "";
}

.color-car::after {
  position: absolute;
  left: 12px;
  bottom: -16px;
  width: 17px;
  height: 17px;
  border: 5px solid #172033;
  border-radius: 50%;
  background: #fffdf5;
  box-shadow: 50px 0 0 -5px #fffdf5, 50px 0 0 0 #172033;
  content: "";
}

.color-palette {
  position: absolute;
  top: 22px;
  right: 14px;
  width: 58px;
  height: 188px;
  border: 5px solid #172033;
  border-radius: 16px;
  background:
    radial-gradient(circle at 18px 25px, #ffd83d 0 11px, transparent 12px),
    radial-gradient(circle at 40px 25px, #ff62a6 0 11px, transparent 12px),
    radial-gradient(circle at 18px 55px, #55c8ff 0 11px, transparent 12px),
    radial-gradient(circle at 40px 55px, #50d66b 0 11px, transparent 12px),
    radial-gradient(circle at 18px 85px, #9b70ff 0 11px, transparent 12px),
    radial-gradient(circle at 40px 85px, #ff9b3d 0 11px, transparent 12px),
    linear-gradient(#fff 0 100%);
  box-shadow: 0 7px 0 #172033;
}

.color-palette::after {
  position: absolute;
  top: 10px;
  left: 9px;
  width: 18px;
  height: 18px;
  border: 4px solid #ff3f8d;
  border-radius: 50%;
  content: "";
}

@media (max-width: 900px) {
  .game-grid {
    grid-template-columns: repeat(2, minmax(250px, 1fr));
  }
}

@media (max-width: 640px) {
  h1 {
    max-width: 100%;
    font-size: clamp(1.95rem, 8.2vw, 3.35rem);
  }

  .game-grid {
    grid-template-columns: 1fr;
  }

  .game-card {
    min-height: 430px;
  }
}

@media (max-width: 460px) {
  .page-shell {
    width: min(100% - 22px, 1100px);
    padding-top: 28px;
  }

  h1 {
    font-size: clamp(1.95rem, 8.2vw, 2.45rem);
  }

  .game-card {
    min-height: 400px;
  }

  .game-copy {
    padding: 18px;
  }
}