.menu-hero-adventure {
  grid-column: 1 / -1;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.34) 0 5px, transparent 6px),
    linear-gradient(135deg, #ff8f70 0%, #ffbe55 46%, #63d9bb 100%) !important;
  box-shadow: 0 14px 34px rgba(239, 116, 83, .28) !important;
}

.menu-hero-world {
  background: linear-gradient(120deg, #1768ac, #2f9bd1 55%, #53d8b6 145%) !important;
  box-shadow: 0 10px 28px rgba(23, 104, 172, .38) !important;
}

.menu-hero-world:hover {
  box-shadow: 0 14px 34px rgba(23, 104, 172, .5) !important;
}

@media (min-width: 901px) {
  .menu-feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .menu-feature-grid .menu-hero:not(.menu-hero-adventure) { padding: 16px 18px; gap: 13px; }
  .menu-feature-grid .menu-hero:not(.menu-hero-adventure) .mc-icon { width: 78px; height: 78px; }
  .menu-feature-grid .menu-hero:not(.menu-hero-adventure) .mc-label { font-size: 1.28rem; line-height: 1.05; }
  .menu-feature-grid .menu-hero:not(.menu-hero-adventure) .mc-sub { font-size: .84rem; line-height: 1.25; }
  .menu-feature-grid .menu-hero:not(.menu-hero-adventure) .mh-go { font-size: 1.45rem; }
}

@media (max-width: 900px) {
  .menu-hero-world,
  .menu-hero-adventure { grid-column: 1 / -1; }
}

.adventure-active #gearBtn { display: none; }

.adventure-menu-icon {
  display: block !important;
  object-fit: cover;
  transform: rotate(-3deg);
  background: #fff9e8;
  border: 3px solid rgba(101, 54, 73, .18);
  border-radius: 18px;
  box-shadow: 0 7px 0 rgba(101, 54, 73, .13);
}

.adventure-screen {
  --ml-ink: #3d3150;
  --ml-cream: #fff9e8;
  --ml-paper: #fffdf7;
  --ml-orange: #ff825f;
  --ml-yellow: #ffd166;
  --ml-mint: #69d7b5;
  --ml-blue: #6eb7ef;
  --ml-shadow: 0 14px 0 rgba(68, 47, 80, .08), 0 22px 50px rgba(64, 49, 84, .16);
  padding: 0 !important;
  color: var(--ml-ink);
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.72) 0 4px, transparent 5px),
    radial-gradient(circle at 88% 76%, rgba(255,255,255,.6) 0 6px, transparent 7px),
    linear-gradient(150deg, #ffe98d 0%, #ffc788 43%, #9be2cf 100%);
  overflow: hidden;
}

.adventure-shell {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.adventure-topbar {
  min-height: 82px;
  display: grid;
  grid-template-columns: minmax(110px, 1fr) auto minmax(110px, 1fr);
  align-items: center;
  gap: 14px;
  padding: max(12px, env(safe-area-inset-top)) clamp(14px, 3vw, 34px) 12px;
  background: rgba(255, 253, 247, .86);
  border-bottom: 3px solid rgba(61, 49, 80, .09);
  backdrop-filter: blur(16px);
  z-index: 3;
}

.adventure-back,
.adventure-round-btn,
.adventure-choice,
.adventure-action,
.adventure-book-btn,
.adventure-style-btn {
  border: 0;
  font: 900 16px/1 'Outfit', system-ui, sans-serif;
  color: var(--ml-ink);
  cursor: pointer;
  touch-action: manipulation;
}

.adventure-back {
  justify-self: start;
  padding: 12px 17px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 5px 0 rgba(61,49,80,.13);
}

.adventure-back:active,
.adventure-round-btn:active,
.adventure-choice:active,
.adventure-action:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(61,49,80,.14); }

.adventure-title-lockup { text-align: center; line-height: 1; }
.adventure-title-lockup .adventure-kicker {
  display: block;
  margin-bottom: 5px;
  color: #d15950;
  font: 800 11px/1 'Inter', system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.adventure-title-lockup strong { font: 900 clamp(21px, 3vw, 31px)/1 'Outfit', system-ui, sans-serif; }

.adventure-progress-chip {
  justify-self: end;
  min-width: 82px;
  padding: 11px 14px;
  border: 3px solid #fff;
  border-radius: 18px;
  color: #fff;
  background: var(--ml-orange);
  box-shadow: 0 5px 0 #d75d46;
  text-align: center;
  font: 900 17px/1 'Outfit', system-ui, sans-serif;
}

.adventure-stage {
  flex: 1;
  min-height: 0;
  width: 100%;
  margin: 0;
  padding: clamp(14px, 2.6vw, 34px);
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.adventure-stage::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.adventure-hub {
  width: min(1280px, 100%);
  margin: 0 auto;
}

.adventure-hero-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  max-width: 1080px;
  margin: 0 auto 22px;
  padding: 22px clamp(22px, 4vw, 42px);
  border: 4px solid rgba(255,255,255,.9);
  border-radius: 30px 22px 34px 20px;
  background: rgba(255,253,247,.88);
  box-shadow: var(--ml-shadow);
  transform: rotate(-.35deg);
}

.adventure-eyebrow {
  display: inline-block;
  color: #b54d57;
  font: 900 12px/1 'Inter', system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.adventure-hero-copy h2 {
  margin: 7px 0 3px;
  color: var(--ml-ink);
  text-shadow: none;
  text-align: left;
  font: 900 clamp(30px, 5vw, 52px)/.95 'Outfit', system-ui, sans-serif;
}

.adventure-hero-copy p { margin: 8px 0 0; color: #675b72; font-weight: 800; }
.adventure-doodle { display: flex; align-items: center; }
.adventure-doodle img {
  width: clamp(48px, 7vw, 76px);
  aspect-ratio: 1;
  object-fit: cover;
  border: 4px solid #fff;
  border-radius: 23px;
  box-shadow: 0 6px 14px rgba(61,49,80,.16);
  margin-left: -9px;
}
.adventure-doodle img:nth-child(odd) { transform: rotate(-7deg); }
.adventure-doodle img:nth-child(even) { transform: translateY(7px) rotate(7deg); }

/* The expansion picker matches the main dashboard cards (.menu-card in
   index.html): big square art on top, centered title, centered blurb. The two
   font vars are declared on .menu-grid rather than :root, so they have to be
   restated here to get the same type. Keep these in sync with .menu-card. */
.adventure-card-grid {
  --menu-cute: 'Fredoka', 'Outfit', system-ui, sans-serif;
  --menu-readable: 'Nunito', 'Inter', system-ui, sans-serif;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  padding: 6px 4px 28px;
}

.adventure-card {
  --card-color: #ff825f;
  position: relative;
  min-width: 0;
  min-height: 360px;
  display: grid;
  /* Two in-flow children: the art, then the copy block. The number badge and
     the completed tick are absolutely positioned. */
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  align-content: stretch;
  padding: 16px 18px 22px;
  border: 3px solid rgba(255, 255, 255, .76);
  border-radius: 30px;
  color: var(--ml-ink);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,252,246,.95));
  box-shadow: var(--shadow-premium, 0 10px 40px -10px rgba(0,0,0,.2), 0 5px 20px -5px rgba(0,0,0,.1));
  backdrop-filter: blur(12px);
  cursor: pointer;
  text-align: center;
  overflow: hidden;
  transition: transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease, border-color .24s ease;
  touch-action: manipulation;
}

.adventure-card:hover, .adventure-card:focus-visible {
  outline: none;
  transform: translateY(-8px) scale(1.025);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .3);
  border-color: var(--card-color);
}

/* Keyboard users get a visible ring as well as the lift. */
.adventure-card:focus-visible {
  outline: 4px solid rgba(255, 255, 255, .94);
  outline-offset: 4px;
}

.adventure-card-icon {
  display: block;
  width: min(100%, 260px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  align-self: center;
  margin: 0 auto 14px;
  border: 0;
  border-radius: 30px;
  background: none;
  filter: drop-shadow(0 9px 14px rgba(66, 47, 76, .16));
  transition: transform .25s ease;
}

.adventure-card:hover .adventure-card-icon { transform: translateY(-2px) scale(1.04); }

/* Reserve the copy block so all fourteen cards land on one height, the way the
   dashboard rows do. Sized for a two-line title plus a blurb plus the personal
   best chip; without it, cards with a best score sit ~26px taller than the rest
   and each grid row settles at a different height. */
.adventure-card-copy {
  display: block;
  align-self: start;
  min-height: 92px;
}

.adventure-card-copy strong {
  display: block;
  font-family: var(--menu-cute);
  font-size: clamp(1.35rem, 2.1vw, 1.65rem);
  font-weight: 700;
  line-height: 1.05;
  color: #382c48;
  text-wrap: balance;
}

.adventure-card-copy small {
  display: block;
  margin-top: 8px;
  color: #655a6f;
  font-family: var(--menu-readable);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}

/* Personal best sits under the blurb as a soft chip in the game's own colour. */
.adventure-card-copy em {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card-color), white 82%);
  color: color-mix(in srgb, var(--card-color), #4a3a56 45%);
  font-family: var(--menu-readable);
  font-size: .84rem;
  font-style: normal;
  font-weight: 800;
}

.adventure-card-number {
  position: absolute;
  top: 14px;
  right: 16px;
  color: color-mix(in srgb, var(--card-color), #5b4768 25%);
  font: 900 12px/1 'Space Mono', monospace;
  opacity: .75;
}

.adventure-card-done {
  position: absolute;
  top: 12px;
  left: 14px;
  width: 30px;
  height: 30px;
  display: none;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #1fab7c;
  box-shadow: 0 3px 9px rgba(31, 171, 124, .4);
  font-weight: 900;
}
.adventure-card.completed .adventure-card-done { display: grid; }

.adventure-game {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 30px);
  border: 4px solid rgba(255,255,255,.94);
  border-radius: 34px 25px 36px 24px;
  background: rgba(255,253,247,.94);
  box-shadow: var(--ml-shadow);
}

.adventure-game.hide, .adventure-hub.hide { display: none; }
.adventure-game-head { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 15px; }
.adventure-round-btn {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 5px 0 rgba(61,49,80,.14);
  font-size: 25px;
}
.adventure-game-heading { display: flex; align-items: center; gap: 12px; }
.adventure-game-heading > img {
  width: clamp(52px, 7vw, 70px);
  height: clamp(52px, 7vw, 70px);
  object-fit: cover;
  border: 3px solid #fff;
  border-radius: 19px;
  box-shadow: 0 5px 0 rgba(61,49,80,.12);
}
.adventure-game-heading small { color: #b15760; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.adventure-game-heading h2 { margin: 2px 0 0; color: var(--ml-ink); text-shadow: none; text-align: left; font: 900 clamp(27px, 4.5vw, 42px)/1 'Outfit', sans-serif; }
.adventure-stars { min-width: 104px; color: #e7b932; font-size: 22px; letter-spacing: 2px; text-align: right; }

.adventure-prompt {
  margin: 22px auto 14px;
  max-width: 720px;
  padding: 12px 20px;
  border-radius: 18px;
  color: #5c4967;
  background: #fff1c9;
  text-align: center;
  font: 900 clamp(17px, 3vw, 22px)/1.2 'Outfit', sans-serif;
}

.adventure-playfield {
  flex: 1;
  min-height: 330px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(14px, 3vw, 28px);
  border: 3px dashed rgba(78,61,93,.17);
  border-radius: 26px;
  background:
    linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)),
    repeating-linear-gradient(0deg, #ecf6f3 0 28px, #dff0eb 29px 30px);
}

.adventure-feedback {
  min-height: 32px;
  padding-top: 13px;
  color: #7b6682;
  text-align: center;
  font-weight: 900;
}
.adventure-feedback.good { color: #168866; }
.adventure-feedback.oops { color: #d14e59; }

.adventure-scene { width: min(760px, 100%); text-align: center; }
.adventure-character {
  width: clamp(132px, 24vw, 210px);
  aspect-ratio: 1;
  margin: 0 auto;
  filter: drop-shadow(0 11px 0 rgba(55,42,68,.09));
  animation: adventureBob 2.2s ease-in-out infinite;
}
.adventure-character-art {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border: 5px solid #fff;
  border-radius: 38% 45% 40% 47%;
}
.adventure-character.happy { animation: adventureCelebrate .55s ease; }
.adventure-speech {
  width: fit-content;
  max-width: 560px;
  margin: 0 auto 20px;
  padding: 13px 18px;
  border: 3px solid #5e4c69;
  border-radius: 20px 20px 20px 5px;
  background: #fff;
  font: 900 18px/1.2 'Outfit', sans-serif;
}
.adventure-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-top: 20px; }
.adventure-choice, .adventure-action, .adventure-book-btn, .adventure-style-btn {
  min-height: 65px;
  padding: 12px 15px;
  border: 3px solid rgba(61,49,80,.12);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 0 rgba(61,49,80,.12);
  transition: transform .15s ease;
}
.adventure-choice:hover, .adventure-action:hover, .adventure-book-btn:hover, .adventure-style-btn:hover { transform: translateY(-3px); }
.adventure-choice .choice-emoji { display: block; margin-bottom: 4px; font-size: 30px; }
.adventure-choice.selected { border-color: #44b890; background: #e3fff6; }
.adventure-choice.wrong { animation: adventureShake .28s ease; border-color: #e55d68; background: #fff0f1; }

.adventure-item-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 13px; width: min(740px, 100%); }
.adventure-item {
  min-height: 100px;
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 10px;
  border: 3px solid #fff;
  border-radius: 20px;
  color: var(--ml-ink);
  background: #fff;
  box-shadow: 0 7px 0 rgba(61,49,80,.12);
  cursor: pointer;
  font-weight: 900;
  touch-action: manipulation;
}
.adventure-item span { display: block; font-size: 38px; }
.adventure-item.found { opacity: .42; transform: scale(.92); box-shadow: none; pointer-events: none; }
.adventure-item.nope { animation: adventureShake .3s ease; background: #fff0f1; }

.adventure-clicker {
  width: clamp(180px, 40vw, 270px);
  height: clamp(180px, 40vw, 270px);
  border: 8px solid #fff;
  border-radius: 48% 52% 43% 57%;
  background: linear-gradient(145deg, #8ae0c5, #58bde6);
  box-shadow: 0 14px 0 #3f92af, 0 23px 40px rgba(45,91,115,.23);
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  touch-action: manipulation;
}
.adventure-clicker img { width: 100%; height: 100%; display: block; object-fit: cover; }
.adventure-clicker:active { transform: translateY(9px) scale(.98); box-shadow: 0 5px 0 #3f92af; }
.adventure-click-count { margin-top: 25px; font: 900 30px/1 'Outfit', sans-serif; }
.adventure-pop { position: absolute; color: #d05062; font: 900 26px/1 'Outfit', sans-serif; animation: adventureFloat .75s ease forwards; pointer-events: none; }

.adventure-dress-stage { display: grid; grid-template-columns: minmax(150px, 240px) 1fr; gap: 24px; width: min(760px, 100%); align-items: center; }
.adventure-dress-pet { position: relative; min-height: 250px; display: grid; place-items: center; border-radius: 45% 55% 48% 52%; background: #dff7ef; font-size: 120px; }
.adventure-worn { position: absolute; filter: drop-shadow(0 3px 0 rgba(0,0,0,.1)); }
.adventure-worn.hat { top: 5px; font-size: 60px; }
.adventure-worn.top { bottom: 38px; font-size: 58px; }
.adventure-worn.extra { right: 15px; top: 85px; font-size: 50px; }
.adventure-style-groups { display: grid; gap: 13px; }
.adventure-style-row { display: grid; grid-template-columns: 82px repeat(3, 1fr); gap: 8px; align-items: center; }
.adventure-style-row strong { font: 900 14px/1 'Outfit', sans-serif; text-transform: uppercase; }
.adventure-style-btn { min-height: 54px; padding: 7px; font-size: 25px; }
.adventure-style-btn.active { border-color: #ef7f67; background: #fff0da; }
.adventure-action { display: inline-block; margin-top: 18px; color: #fff; background: #ed755d; border-color: #d55b47; box-shadow: 0 6px 0 #ba4938; }

.adventure-bug-field { position: absolute; inset: 0; }
.adventure-bug {
  position: absolute;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.82);
  box-shadow: 0 7px 0 rgba(61,49,80,.12);
  font-size: 35px;
  cursor: crosshair;
  animation: adventureBugWiggle .9s ease-in-out infinite alternate;
  touch-action: manipulation;
}

.adventure-book { width: min(700px, 100%); }
.adventure-book-pages { display: grid; grid-template-columns: 1fr 1fr; min-height: 260px; border: 8px solid #cf7b55; border-radius: 18px 18px 28px 28px; background: #fff9da; box-shadow: 0 13px 0 #9c573d; overflow: hidden; }
.adventure-book-page { display: grid; place-items: center; padding: 24px; text-align: center; font: 900 clamp(19px, 3vw, 27px)/1.3 'Outfit', sans-serif; }
.adventure-book-page:first-child { border-right: 3px solid #e4cfa2; font-size: clamp(70px, 13vw, 120px); }
.adventure-book-nav { display: flex; justify-content: center; gap: 12px; margin-top: 22px; }
.adventure-book-btn:disabled { opacity: .4; cursor: default; }

.adventure-mop-grid { display: grid; grid-template-columns: repeat(4, minmax(62px, 110px)); gap: 9px; }
.adventure-mess {
  aspect-ratio: 1;
  border: 3px solid #cdb78e;
  border-radius: 14px;
  background: #e1c89e;
  box-shadow: inset 0 -7px rgba(120,85,54,.08);
  cursor: pointer;
  font-size: clamp(26px, 5vw, 43px);
  touch-action: manipulation;
}
.adventure-mess.clean { background: #f4dfb8; color: transparent; cursor: default; animation: adventureClean .38s ease; }

.adventure-fruit-row, .adventure-log-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.adventure-fruit, .adventure-log {
  min-width: 120px;
  min-height: 120px;
  border: 4px solid #fff;
  border-radius: 35px;
  background: #fff8dc;
  box-shadow: 0 9px 0 rgba(61,49,80,.13);
  cursor: pointer;
  font-size: 64px;
  touch-action: manipulation;
}
.adventure-fruit.done, .adventure-log.done { opacity: .45; transform: scale(.88); box-shadow: none; pointer-events: none; }
.adventure-cut-mark { display: block; font: 900 12px/1 'Inter', sans-serif; letter-spacing: 3px; }

.adventure-cupcake { font-size: 126px; filter: drop-shadow(0 10px 0 rgba(61,49,80,.1)); }
.adventure-recipe-step { width: min(690px, 100%); }

.adventure-path { display: grid; grid-template-columns: repeat(4, minmax(58px, 100px)); gap: 12px; }
.adventure-step {
  aspect-ratio: 1;
  border: 4px solid #fff;
  border-radius: 50% 45% 50% 44%;
  background: #9ddac7;
  color: #286a5c;
  box-shadow: 0 7px 0 #65aa96;
  cursor: pointer;
  font: 900 25px/1 'Outfit', sans-serif;
}
.adventure-step.walked { color: #fff; background: #ed856c; box-shadow: none; }

.adventure-salon { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: 24px; align-items: center; width: min(760px, 100%); }
.adventure-hair-head { position: relative; min-height: 280px; display: grid; place-items: end center; font-size: 130px; }
.adventure-tuft {
  position: absolute;
  width: 62px;
  height: 62px;
  border: 0;
  border-radius: 55% 45% 48% 52%;
  background: #704b36;
  color: #fff;
  cursor: pointer;
  font-size: 17px;
}
.adventure-tuft:nth-child(1) { top: 9px; left: 25%; transform: rotate(-25deg); }
.adventure-tuft:nth-child(2) { top: 0; left: 43%; }
.adventure-tuft:nth-child(3) { top: 12px; right: 22%; transform: rotate(25deg); }
.adventure-tuft:nth-child(4) { top: 54px; left: 17%; transform: rotate(-50deg); }
.adventure-tuft:nth-child(5) { top: 54px; right: 15%; transform: rotate(50deg); }
.adventure-tuft.cut { opacity: 0; transform: scale(.2); transition: .25s ease; pointer-events: none; }
.adventure-salon-tools { display: grid; gap: 12px; }

.adventure-finish {
  width: min(650px, 100%);
  text-align: center;
  animation: adventureFinish .5s ease both;
}
.adventure-finish-icon img {
  width: clamp(130px, 24vw, 210px);
  aspect-ratio: 1;
  object-fit: cover;
  border: 6px solid #fff;
  border-radius: 34px;
  box-shadow: 0 10px 0 rgba(61,49,80,.11);
}
.adventure-finish h3 { margin: 8px 0; font: 900 clamp(30px, 5vw, 48px)/1 'Outfit', sans-serif; }
.adventure-finish p { color: #6e6077; font-size: 17px; font-weight: 800; }
.adventure-reward { width: fit-content; margin: 14px auto 0; padding: 10px 16px; border-radius: 16px; color: #7c5d08; background: #fff0aa; font-weight: 900; }

@keyframes adventureBob { 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes adventureCelebrate { 45% { transform: translateY(-22px) rotate(-8deg) scale(1.08); } }
@keyframes adventureShake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes adventureFloat { to { transform: translateY(-80px) rotate(9deg); opacity: 0; } }
@keyframes adventureBugWiggle { to { transform: translate(7px, -6px) rotate(10deg); } }
@keyframes adventureClean { 50% { transform: scale(.82) rotate(5deg); } }
@keyframes adventureFinish { from { transform: scale(.75) rotate(-3deg); opacity: 0; } }

@media (max-width: 840px) {
  .adventure-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .adventure-topbar { grid-template-columns: auto 1fr auto; min-height: 68px; padding-bottom: 9px; }
  .adventure-back { width: 47px; height: 43px; overflow: hidden; padding: 0; font-size: 0; }
  .adventure-back::before { content: '←'; font-size: 24px; }
  .adventure-title-lockup .adventure-kicker { display: none; }
  .adventure-title-lockup strong { font-size: 20px; }
  .adventure-progress-chip { min-width: 64px; padding: 10px 8px; font-size: 14px; }
  .adventure-stage { padding: 12px; }
  .adventure-hero-copy { padding: 18px 19px; border-radius: 24px; }
  .adventure-hero-copy h2 { font-size: 34px; }
  .adventure-hero-copy p { font-size: 14px; }
  .adventure-doodle { display: none; }
  /* Keep the dashboard card shape on phones - art on top, title, blurb - just
     two-up and shorter, so fourteen games are not one endless column. */
  .adventure-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .adventure-card { min-height: 232px; padding: 12px 12px 16px; border-radius: 24px; }
  .adventure-card-icon { width: min(100%, 150px); margin: 0 auto 10px; border-radius: 22px; }
  /* Measured worst case at this size: title + blurb + personal best chip. */
  .adventure-card-copy { min-height: 84px; }
  .adventure-card-copy strong { font-size: 1.05rem; }
  .adventure-card-copy small { font-size: .8rem; line-height: 1.25; }
  .adventure-card-copy em { margin-top: 7px; padding: 3px 9px; font-size: .74rem; }
  .adventure-card-number { top: 9px; right: 10px; }
  .adventure-card-done { top: 8px; left: 9px; width: 26px; height: 26px; }
  .adventure-game { padding: 14px; border-radius: 25px; }
  .adventure-game-head { grid-template-columns: 45px 1fr; gap: 9px; }
  .adventure-round-btn { width: 43px; height: 43px; font-size: 21px; border-radius: 14px; }
  .adventure-game-heading > img { width: 48px; height: 48px; border-radius: 15px; }
  .adventure-game-heading h2 { font-size: 27px; }
  .adventure-stars { display: none; }
  .adventure-playfield { min-height: 390px; padding: 12px; }
  .adventure-choice-grid { grid-template-columns: repeat(2, 1fr); }
  .adventure-dress-stage, .adventure-salon { grid-template-columns: 1fr; }
  .adventure-dress-pet { min-height: 205px; font-size: 100px; }
  .adventure-style-row { grid-template-columns: 65px repeat(3, 1fr); }
  .adventure-book-pages { min-height: 240px; }
  .adventure-book-page { padding: 13px; }
  .adventure-mop-grid { grid-template-columns: repeat(4, minmax(48px, 78px)); }
  .adventure-salon { gap: 5px; }
  .adventure-hair-head { min-height: 230px; }
}

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

/* Production play layer --------------------------------------------------- */
.adventure-card-copy em {
  display: inline-block;
  margin-top: 7px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #695276;
  background: #f2ebf6;
  font: 800 11px/1 'Inter', sans-serif;
  font-style: normal;
}

.adventure-game {
  width: min(1180px, 100%);
  max-width: 1180px;
}

.adventure-stars {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.adventure-stars span {
  width: 25px;
  height: 12px;
  border: 2px solid #d8bf6b;
  border-radius: 999px;
  background: #fff5c8;
  transition: background .25s ease, transform .25s ease;
}

.adventure-stars span.filled {
  background: #f4c842;
  transform: scale(1.08);
}

.adventure-playfield {
  min-height: clamp(480px, 62vh, 660px);
  display: block;
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: #d7e6df;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.9), 0 10px 24px rgba(53,42,66,.15);
}

.adventure-world {
  position: relative;
  width: 100%;
  min-height: clamp(480px, 62vh, 660px);
  overflow: hidden;
  border-radius: 28px;
  background-color: #dfecdf;
  background-image: var(--scene-image);
  background-position: center;
  background-size: cover;
  isolation: isolate;
}

.adventure-world-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.adventure-world-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(31,24,41,.06), transparent 30%, rgba(25,20,32,.24)),
    radial-gradient(circle at 50% 48%, transparent 0 30%, rgba(27,22,33,.11) 100%);
}

.adventure-world-content {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: inherit;
  display: grid;
  place-items: center;
  padding: 76px clamp(16px, 4vw, 44px) 28px;
}

.adventure-scoreboard {
  position: absolute;
  top: 16px;
  right: 17px;
  display: flex;
  gap: 8px;
  z-index: 5;
}

.adventure-scoreboard span,
.bug-hud,
.mop-counter,
.fruit-safety,
.wood-safety,
.swipe-hint {
  border: 2px solid rgba(255,255,255,.95);
  border-radius: 14px;
  color: #443650;
  background: rgba(255,253,247,.91);
  box-shadow: 0 5px 14px rgba(42,31,50,.16);
  backdrop-filter: blur(10px);
  font: 800 13px/1 'Inter', sans-serif;
}

.adventure-scoreboard span { padding: 9px 11px; }
.adventure-scoreboard strong { margin-left: 4px; color: #cb5f56; font-size: 16px; }

.adventure-glass-panel {
  width: min(900px, 100%);
  padding: clamp(18px, 3vw, 30px);
  border: 3px solid rgba(255,255,255,.96);
  border-radius: 28px;
  background: rgba(255,253,247,.88);
  box-shadow: 0 16px 35px rgba(43,31,51,.22);
  backdrop-filter: blur(13px);
}

.adventure-glass-panel h3 {
  margin: 8px 0 18px;
  color: #473850;
  text-align: center;
  font: 900 clamp(22px, 3vw, 30px)/1.1 'Outfit', sans-serif;
}

.adventure-story-line {
  margin: 0;
  color: #74647b;
  text-align: center;
  font-weight: 800;
}

.adventure-job-list {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.adventure-job-list li {
  min-width: 120px;
  padding: 9px 12px;
  border: 2px solid #e7dce9;
  border-radius: 14px;
  color: #807286;
  background: #fff;
  text-align: center;
  font-weight: 800;
}

.adventure-job-list li.current { border-color: var(--activity-color); color: #493950; box-shadow: 0 0 0 3px color-mix(in srgb, var(--activity-color), transparent 75%); }
.adventure-job-list li.done { color: #217c61; background: #e1f8ef; border-color: #8dd7c0; }

.adventure-tool-tray,
.adventure-shelf {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  gap: 12px;
}

.adventure-prop-btn,
.adventure-product,
.style-controls button,
.salon-controls button,
.recipe-controls button,
.book-question button,
.book-nav button,
.trail-card button,
.finish-actions button {
  border: 3px solid rgba(74,56,82,.11);
  border-radius: 17px;
  color: #493950;
  background: #fff;
  box-shadow: 0 6px 0 rgba(63,48,72,.14);
  cursor: pointer;
  font: 900 15px/1.1 'Outfit', sans-serif;
  touch-action: manipulation;
}

.adventure-prop-btn {
  min-height: 76px;
  padding: 13px;
}

.adventure-prop-btn::before {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 auto 8px;
  border: 5px solid var(--activity-color);
  border-radius: 50% 45% 55% 46%;
  background: color-mix(in srgb, var(--activity-color), white 58%);
  box-shadow: inset 0 0 0 4px #fff;
}

.adventure-prop-btn:active,
.adventure-product:active,
.style-controls button:active,
.salon-controls button:active,
.recipe-controls button:active,
.book-question button:active,
.trail-card button:active,
.adventure-primary:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(63,48,72,.14); }

.adventure-prop-btn.wrong,
.adventure-product.wrong,
.style-controls button.wrong,
.salon-controls button.wrong,
.recipe-controls button.wrong,
.book-question button.wrong,
.trail-card button.wrong { border-color: #e46670; background: #fff0f1; animation: adventureShake .3s ease; }

.adventure-mission-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-bottom: 19px;
}

.adventure-mission-list strong {
  padding: 9px 12px;
  color: #fff;
  border-radius: 12px;
  background: var(--activity-color);
}

.adventure-mission-list span {
  padding: 9px 12px;
  border-radius: 12px;
  background: #fff;
  font-weight: 800;
}

.adventure-mission-list span.done { color: #18775b; text-decoration: line-through; background: #dff7ed; }

.adventure-product {
  min-height: 100px;
  padding: 11px 8px;
}

.adventure-product i {
  display: block;
  width: 48px;
  height: 43px;
  margin: 0 auto 8px;
  border: 5px solid rgba(255,255,255,.8);
  border-radius: 17px 20px 15px 18px;
  background: hsl(var(--prop-hue) 65% 66%);
  box-shadow: 0 4px 0 hsla(var(--prop-hue), 40%, 35%, .25);
}

.adventure-product.found { opacity: .55; box-shadow: none; pointer-events: none; }

.clicker-stage { display: grid; justify-items: center; width: min(650px, 100%); }
.clicker-meter { width: min(520px, 84%); height: 24px; overflow: hidden; border: 4px solid #fff; border-radius: 999px; background: rgba(39,30,50,.3); box-shadow: 0 5px 15px rgba(0,0,0,.17); }
.clicker-meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #64dcba, #ffdb63, #ef81bf); transition: width .15s ease; }
.adventure-click-target {
  --hop-x: 0px;
  --hop-y: 0px;
  width: clamp(160px, 26vw, 245px);
  aspect-ratio: 1;
  margin: 28px 0 20px;
  padding: 0;
  overflow: hidden;
  border: 8px solid #fff;
  border-radius: 45% 52% 46% 54%;
  background: #6bd1b5;
  box-shadow: 0 15px 0 rgba(53,78,104,.5), 0 23px 36px rgba(22,25,51,.28);
  cursor: pointer;
  transform: translate(var(--hop-x), var(--hop-y));
  transition: transform .2s ease;
}
.adventure-click-target img { width: 100%; height: 100%; object-fit: cover; }
.adventure-click-target.hit { animation: adventureTargetHit .23s ease; }
.clicker-readout { display: flex; align-items: center; gap: 11px; padding: 11px 15px; border: 3px solid #fff; border-radius: 16px; background: rgba(255,255,255,.9); box-shadow: 0 6px 15px rgba(31,24,40,.17); }
.clicker-readout strong { font: 900 23px/1 'Outfit', sans-serif; }
.clicker-readout span { padding: 6px 9px; border-radius: 10px; color: #fff; background: #57436b; font-weight: 900; }

.style-panel,
.salon-panel {
  display: grid;
  grid-template-columns: 170px minmax(160px, 230px) 1fr;
  gap: 18px;
  align-items: center;
}

.style-card,
.salon-card {
  padding: 16px;
  border: 3px dashed #dd91c7;
  border-radius: 19px;
  background: #fff2fb;
}
.style-card strong,
.style-card span { display: block; text-align: center; }
.style-card strong { font: 900 24px/1 'Outfit', sans-serif; }
.style-card span { margin: 5px 0 12px; color: #98718d; font-weight: 800; }
.style-card small { display: block; margin-top: 6px; padding: 7px; border-radius: 9px; background: #fff; font-weight: 800; }
.style-client,
.salon-client { text-align: center; }
.style-client img,
.salon-client img { width: min(190px, 100%); aspect-ratio: 1; object-fit: cover; border: 6px solid #fff; border-radius: 34px; box-shadow: 0 9px 0 rgba(71,51,82,.14); }
.style-client div,
.salon-client strong,
.salon-client span { display: block; margin-top: 9px; font-weight: 900; }
.style-controls,
.salon-controls { display: grid; gap: 9px; }
.style-controls > div,
.salon-controls > div { display: grid; grid-template-columns: 78px repeat(3, 1fr); gap: 6px; align-items: center; }
.style-controls button,
.salon-controls button { min-height: 48px; padding: 7px; font-size: 13px; }
.style-controls button.selected,
.salon-controls button.selected { border-color: #df6bac; color: #913873; background: #ffe6f6; }

.adventure-primary {
  min-height: 55px;
  padding: 12px 18px;
  border: 3px solid #fff;
  border-radius: 17px;
  color: #fff !important;
  background: var(--activity-color, #e56f62) !important;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--activity-color, #e56f62), #493850 35%) !important;
  cursor: pointer;
  font: 900 16px/1 'Outfit', sans-serif;
}

.bug-hud {
  position: absolute;
  top: 17px;
  left: 17px;
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 10px 13px;
  z-index: 4;
}
.bug-hud strong { font-size: 17px; }
.bug-hud span { padding: 5px 8px; border-radius: 8px; background: #efe8f1; }
.adventure-bug-field { position: absolute; inset: 70px 10px 10px; }
.adventure-bug-token {
  position: absolute;
  width: 66px;
  height: 66px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: rgba(255,255,255,.88);
  box-shadow: 0 7px 0 rgba(56,46,65,.18);
  cursor: pointer;
  animation: adventureBugFloat 1.2s ease-in-out infinite alternate;
}
.adventure-bug-token i {
  position: absolute;
  width: 31px;
  height: 38px;
  left: 14px;
  top: 10px;
  border: 3px solid #44364d;
  border-radius: 55% 55% 48% 48%;
  background: var(--bug-color);
}
.adventure-bug-token i::before,
.adventure-bug-token i::after {
  content: '';
  position: absolute;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #44364d;
}
.adventure-bug-token i::before { left: 3px; }
.adventure-bug-token i::after { right: 3px; }

.adventure-book-pro { width: min(760px, 100%); }
.book-cover-line { display: flex; justify-content: space-between; padding: 12px 18px; border: 4px solid #fff; border-radius: 18px 18px 5px 5px; color: #fff; background: #7e5b72; }
.book-cover-line span { font: 900 22px/1 'Outfit', sans-serif; }
.book-spread { min-height: 300px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 8px solid #c57b55; border-radius: 7px 7px 24px 24px; background: #fff9dc; box-shadow: 0 14px 0 #8c543c, 0 20px 30px rgba(32,25,37,.25); }
.book-art-page,
.book-text-page { display: grid; place-items: center; padding: 28px; }
.book-art-page { border-right: 3px solid #e5cfa4; background: linear-gradient(145deg, #e9f7e9, #fff1c9); }
.book-text-page { color: #4a3a51; text-align: center; font: 900 clamp(20px, 3vw, 29px)/1.35 'Outfit', sans-serif; }
.story-shape { width: 145px; height: 145px; border: 12px solid #fff; border-radius: 48% 52% 45% 55%; background: linear-gradient(135deg, #79d7b8, #f2c45c, #df7faf); box-shadow: 0 9px 0 rgba(62,48,70,.14); }
.shape-2 { border-radius: 50% 50% 12% 50%; background: linear-gradient(145deg, #536ecb, #d6e9ff); }
.shape-3 { border-radius: 60% 20% 55% 25%; background: linear-gradient(145deg, #62b6de, #fff); }
.book-question { grid-column: 1 / -1; display: grid; align-content: center; gap: 11px; padding: 30px; }
.book-question h3 { margin: 0 0 8px; text-align: center; font: 900 clamp(24px, 4vw, 34px)/1.1 'Outfit', sans-serif; }
.book-question button { min-height: 52px; }
.book-nav { display: flex; justify-content: center; gap: 11px; margin-top: 20px; }
.book-nav button { min-width: 140px; min-height: 50px; }
.book-nav button:disabled { opacity: .45; cursor: default; }

.mop-counter { position: absolute; top: 17px; left: 17px; padding: 11px 14px; z-index: 4; }
.adventure-spill {
  position: absolute;
  width: clamp(58px, 8vw, 92px);
  height: clamp(42px, 6vw, 67px);
  border: 5px solid rgba(255,255,255,.5);
  border-radius: 65% 35% 55% 45%;
  background: rgba(61,168,207,.7);
  box-shadow: inset 8px 7px rgba(255,255,255,.22), 0 5px 10px rgba(31,69,80,.2);
}
.spill-1 { background: rgba(180,122,73,.72); transform: rotate(21deg); }
.spill-2 { background: rgba(239,113,130,.68); transform: rotate(-17deg); }
.adventure-mop {
  position: absolute;
  left: 50%;
  top: 76%;
  width: 95px;
  height: 65px;
  margin: -32px 0 0 -47px;
  border: 5px solid #fff;
  border-radius: 24px 24px 32px 32px;
  color: #fff;
  background: #51b6ab;
  box-shadow: 0 8px 0 #397f7d, 0 12px 20px rgba(35,48,56,.25);
  cursor: grab;
  z-index: 5;
  touch-action: none;
}
.adventure-mop::before { content: ''; position: absolute; width: 14px; height: 105px; left: 36px; bottom: 43px; border: 4px solid #fff; border-radius: 10px; background: #ef775e; transform: rotate(8deg); z-index: -1; }
.adventure-mop.dragging { cursor: grabbing; transform: scale(1.08); }

.fruit-safety,
.wood-safety { position: absolute; top: 17px; left: 17px; max-width: 330px; padding: 10px 13px; z-index: 4; }
.fruit-board { position: absolute; inset: 75px 12px 45px; touch-action: none; }
.fruit-piece {
  position: absolute;
  left: var(--fruit-x);
  top: var(--fruit-y);
  width: clamp(90px, 13vw, 135px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 6px solid #fff;
  border-radius: 50% 46% 52% 48%;
  background: var(--fruit-color);
  box-shadow: inset -13px -10px rgba(77,39,68,.11), 0 10px 0 rgba(67,49,74,.18);
  cursor: crosshair;
  animation: adventureFruitHover 1.6s ease-in-out infinite alternate;
}
.fruit-piece::before { content: ''; position: absolute; width: 13px; height: 27px; left: 48%; top: -17px; border-radius: 8px; background: #6c8d3a; transform: rotate(17deg); }
.fruit-piece span { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); padding: 6px 9px; border: 2px solid #fff; border-radius: 9px; color: #42344c; background: rgba(255,255,255,.9); font-weight: 900; white-space: nowrap; }
.fruit-piece.sliced { opacity: .25; transform: translate(-50%, -50%) rotate(20deg) scale(.7); pointer-events: none; transition: .35s ease; }
.swipe-hint { position: absolute; bottom: 13px; left: 50%; padding: 9px 13px; transform: translateX(-50%); white-space: nowrap; }

.bakery-panel { display: grid; grid-template-columns: 190px 180px 1fr; gap: 18px; align-items: center; }
.order-ticket { padding: 15px; border: 3px dashed #e99bbb; border-radius: 18px; background: #fff5fa; }
.order-ticket strong { display: block; margin-bottom: 10px; text-align: center; font: 900 22px/1 'Outfit', sans-serif; }
.order-ticket span { display: block; margin-top: 6px; padding: 7px; border-radius: 9px; background: #fff; font-size: 13px; font-weight: 800; }
.order-ticket span.current { color: #a93e71; box-shadow: 0 0 0 2px #e986b3; }
.order-ticket span.done { color: #23785f; background: #e1f7ee; }
.cupcake-build { position: relative; height: 190px; }
.cupcake-base { position: absolute; width: 130px; height: 95px; left: 25px; bottom: 5px; border-radius: 12px 12px 44px 44px; background: repeating-linear-gradient(90deg, #e78bac 0 12px, #f6b4ca 12px 24px); box-shadow: 0 9px 0 rgba(88,55,72,.15); }
.cupcake-layer { position: absolute; left: 20px; width: 140px; border-radius: 50%; background: #f0d18b; }
.layer-0 { height: 65px; bottom: 67px; }
.layer-1 { width: 118px; height: 57px; left: 31px; bottom: 105px; background: #d96788; }
.layer-2 { width: 95px; height: 45px; left: 43px; bottom: 137px; background: #fff7df; }
.layer-3 { width: 34px; height: 34px; left: 73px; bottom: 164px; background: #65b9bd; }
.recipe-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.recipe-controls h3 { grid-column: 1 / -1; margin: 0 0 6px; }
.recipe-controls button { min-height: 58px; }

.wood-game { display: grid; justify-items: center; width: min(680px, 100%); padding: 26px; }
.wood-log { width: 230px; height: 145px; display: grid; place-items: center; margin-bottom: 28px; border: 9px solid #8a543c; border-radius: 50%; color: #70412f; background: repeating-radial-gradient(circle, #d29b67 0 15px, #be8055 16px 20px); box-shadow: 0 16px 0 #654333, 0 23px 30px rgba(35,26,34,.25); }
.wood-log span { padding: 8px 12px; border-radius: 12px; background: rgba(255,247,225,.9); font: 900 23px/1 'Outfit', sans-serif; }
.timing-track { position: relative; width: min(580px, 90%); height: 42px; margin-bottom: 22px; border: 6px solid #fff; border-radius: 999px; background: linear-gradient(90deg, #e86c6a 0 30%, #efc354 30% 40%, #68c697 40% 60%, #efc354 60% 70%, #e86c6a 70%); box-shadow: 0 7px 15px rgba(35,27,39,.2); }
.timing-needle { position: absolute; width: 10px; height: 60px; left: 0; top: -15px; margin-left: -5px; border: 3px solid #fff; border-radius: 7px; background: #4c3a55; box-shadow: 0 4px 8px rgba(0,0,0,.2); }

.walk-route { width: min(680px, 100%); }
.route-progress { display: flex; justify-content: center; gap: 12px; margin-bottom: 18px; }
.route-progress span { width: 62px; height: 18px; border: 4px solid #fff; border-radius: 999px; background: rgba(255,255,255,.62); }
.route-progress span.current { background: #f4c75c; }
.route-progress span.done { background: #63c29b; }
.trail-card { padding: 24px; border: 4px solid #fff; border-radius: 25px; background: rgba(255,253,247,.91); box-shadow: 0 13px 28px rgba(36,29,43,.2); backdrop-filter: blur(10px); }
.trail-card small { color: #9b6572; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.trail-card h3 { margin: 6px 0 18px; font: 900 clamp(24px, 4vw, 34px)/1.1 'Outfit', sans-serif; }
.trail-card button { width: 100%; min-height: 56px; margin-top: 10px; }

.salon-client strong { font: 900 22px/1 'Outfit', sans-serif; }
.salon-client span { color: #947487; }

.adventure-finish-pro {
  width: min(820px, 100%);
  display: grid;
  grid-template-columns: minmax(160px, 260px) 1fr;
  gap: 28px;
  align-items: center;
  padding: 28px;
  border: 4px solid #fff;
  border-radius: 30px;
  background: rgba(255,253,247,.93);
  box-shadow: 0 16px 35px rgba(40,30,47,.25);
}
.adventure-finish-pro > img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 6px solid #fff; border-radius: 32px; box-shadow: 0 10px 0 rgba(61,46,69,.13); }
.adventure-finish-pro small { color: #b45964; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }
.adventure-finish-pro h3 { margin: 5px 0 16px; font: 900 clamp(30px, 5vw, 46px)/1 'Outfit', sans-serif; }
.finish-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.finish-stats span { padding: 12px 6px; border-radius: 15px; color: #7a6c80; background: #f5eef4; text-align: center; font-weight: 800; }
.finish-stats strong { display: block; margin-bottom: 3px; color: #493950; font: 900 24px/1 'Outfit', sans-serif; }
.finish-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.finish-actions button { flex: 1 1 170px; min-height: 54px; padding: 10px; }

@keyframes adventureTargetHit { 50% { transform: translate(var(--hop-x), var(--hop-y)) scale(.91) rotate(-3deg); } }
@keyframes adventureBugFloat { to { transform: translate(8px, -11px) rotate(8deg); } }
@keyframes adventureFruitHover { to { margin-top: -10px; transform: translate(-50%, -50%) rotate(4deg); } }

@media (max-width: 820px) {
  .adventure-playfield,
  .adventure-world { min-height: 560px; }
  .style-panel,
  .salon-panel { grid-template-columns: 130px 1fr; }
  .style-controls,
  .salon-controls { grid-column: 1 / -1; }
  .style-client img,
  .salon-client img { width: 125px; }
  .bakery-panel { grid-template-columns: 150px 1fr; }
  .recipe-controls { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .adventure-prompt { margin: 14px auto 10px; padding: 10px 12px; }
  .adventure-playfield,
  .adventure-world { min-height: 590px; border-radius: 20px; }
  .adventure-world-content { padding: 76px 11px 22px; }
  .adventure-scoreboard { top: 10px; right: 9px; }
  .adventure-scoreboard span { padding: 8px; font-size: 11px; }
  .adventure-scoreboard strong { font-size: 13px; }
  .adventure-glass-panel { padding: 15px 11px; border-radius: 20px; }
  .adventure-job-list { gap: 5px; }
  .adventure-job-list li { min-width: 0; flex: 1; padding: 7px 4px; font-size: 11px; }
  .adventure-tool-tray,
  .adventure-shelf { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .adventure-prop-btn { min-height: 63px; padding: 7px; font-size: 13px; }
  .adventure-product { min-height: 83px; }
  .style-panel,
  .salon-panel { grid-template-columns: 105px 1fr; gap: 9px; }
  .style-card { padding: 9px; }
  .style-card strong { font-size: 17px; }
  .style-card small { padding: 4px; font-size: 10px; }
  .style-client img,
  .salon-client img { width: 95px; }
  .style-controls > div,
  .salon-controls > div { grid-template-columns: 58px repeat(3, 1fr); gap: 4px; }
  .style-controls > div > strong,
  .salon-controls > div > strong { font-size: 10px; }
  .style-controls button,
  .salon-controls button { min-height: 43px; padding: 4px 2px; font-size: 10px; }
  .adventure-bug-token { width: 55px; height: 55px; }
  .book-spread { min-height: 330px; display: block; }
  .book-art-page { height: 145px; border-right: 0; border-bottom: 3px solid #e5cfa4; }
  .story-shape { width: 95px; height: 95px; }
  .book-text-page { min-height: 180px; padding: 17px; }
  .fruit-piece { width: 82px; }
  .bakery-panel { grid-template-columns: 120px 1fr; gap: 8px; }
  .cupcake-build { transform: scale(.77); transform-origin: center; }
  .recipe-controls button { padding: 5px; font-size: 12px; }
  .adventure-finish-pro { display: block; padding: 20px; text-align: center; }
  .adventure-finish-pro > img { width: 140px; margin-bottom: 14px; }
  .finish-stats strong { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .adventure-click-target,
  .adventure-bug-token,
  .fruit-piece { animation: none !important; transition: none !important; }
}

/* Dog Life — seven-day pet care game ------------------------------------ */
.adventure-playfield > .adventure-world,
.adventure-playfield > .dog-life-world {
  height: 100%;
}

.dog-life-world {
  position: relative;
  width: 100%;
  min-height: clamp(590px, 68vh, 760px);
  overflow: hidden;
  border-radius: 28px;
  isolation: isolate;
  background: #dce9df;
}

.dog-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(29,22,34,.1), transparent 30%, rgba(27,21,32,.22)),
    radial-gradient(circle at 50% 48%, transparent 0 35%, rgba(32,24,36,.13) 100%);
}

.dog-week {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 8;
  display: flex;
  gap: 6px;
  padding: 7px;
  border: 2px solid rgba(255,255,255,.94);
  border-radius: 16px;
  background: rgba(255,253,247,.9);
  box-shadow: 0 6px 18px rgba(48,35,55,.18);
  backdrop-filter: blur(10px);
  transform: translateX(-50%);
}

.dog-week span {
  width: 36px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 2px solid #e5dce7;
  border-radius: 10px;
  color: #77697b;
  background: #fff;
  font: 900 11px/1 'Inter', sans-serif;
}

.dog-week span.done {
  border-color: #70c9a8;
  color: #1b7659;
  background: #dbf7ec;
}

.dog-week span.current {
  border-color: #ff826c;
  color: #a33e38;
  background: #ffe8df;
  box-shadow: 0 0 0 3px rgba(255,130,108,.22);
}

.dog-needs {
  position: absolute;
  top: 67px;
  left: 14px;
  z-index: 8;
  width: 178px;
  padding: 11px;
  border: 3px solid rgba(255,255,255,.94);
  border-radius: 19px;
  background: rgba(255,253,247,.9);
  box-shadow: 0 8px 20px rgba(44,33,50,.19);
  backdrop-filter: blur(10px);
}

.dog-need {
  display: grid;
  grid-template-columns: 66px 1fr 25px;
  align-items: center;
  gap: 5px;
  margin: 7px 0;
}

.dog-need > span {
  color: #5b4a62;
  font: 800 10px/1 'Inter', sans-serif;
}

.dog-need > div {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9e2e9;
  box-shadow: inset 0 1px 2px rgba(45,34,50,.15);
}

.dog-need i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--need-color);
  transition: width .45s ease;
}

.dog-need strong {
  color: #6a5b6f;
  text-align: right;
  font: 900 10px/1 'Inter', sans-serif;
}

.dog-score {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 2px solid #fff;
  border-radius: 14px;
  color: #5b4b60;
  background: rgba(255,253,247,.9);
  box-shadow: 0 6px 18px rgba(48,35,55,.18);
  backdrop-filter: blur(10px);
}

.dog-score span { font: 800 10px/1 'Inter', sans-serif; }
.dog-score strong { color: #d2584f; font: 900 19px/1 'Outfit', sans-serif; }

.dog-play-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.dog-instruction {
  position: absolute;
  top: 66px;
  left: 50%;
  z-index: 7;
  min-width: 320px;
  max-width: min(570px, calc(100% - 410px));
  padding: 11px 18px;
  border: 3px solid rgba(255,255,255,.95);
  border-radius: 17px;
  color: #49384f;
  background: rgba(255,253,247,.9);
  box-shadow: 0 8px 20px rgba(42,31,47,.18);
  text-align: center;
  backdrop-filter: blur(10px);
  transform: translateX(-50%);
}

.dog-instruction small,
.dog-instruction strong,
.dog-instruction span { display: block; }
.dog-instruction small { color: #c4504b; font: 900 10px/1 'Inter', sans-serif; letter-spacing: .09em; text-transform: uppercase; }
.dog-instruction strong { margin: 4px 0; font: 900 clamp(17px, 2.3vw, 23px)/1.05 'Outfit', sans-serif; }
.dog-instruction span { color: #78697d; font: 800 11px/1 'Inter', sans-serif; }

.dog-task-strip {
  position: absolute;
  right: 15px;
  bottom: 14px;
  left: 15px;
  z-index: 8;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}

.dog-task-strip span {
  min-width: 0;
  max-width: 140px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.95);
  border-radius: 12px;
  color: #6d5e72;
  background: rgba(255,253,247,.87);
  box-shadow: 0 5px 14px rgba(43,33,48,.16);
  font: 800 10px/1 'Inter', sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

.dog-task-strip i {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border: 2px solid #cfc4d1;
  border-radius: 50%;
  background: #fff;
}

.dog-task-strip span.done { color: #23775e; background: rgba(226,249,240,.92); }
.dog-task-strip span.done i { border-color: #4fb58f; background: #4fb58f; }
.dog-task-strip span.current { color: #a33e38; background: rgba(255,235,226,.94); box-shadow: 0 0 0 3px rgba(255,130,108,.18), 0 5px 14px rgba(43,33,48,.16); }
.dog-task-strip span.current i { border-color: #ff7f69; background: #ff7f69; }

.dog-feed-station {
  position: absolute;
  inset: 150px 30px 70px 215px;
}

.dog-food-bin {
  position: absolute;
  left: 4%;
  bottom: 5%;
  width: 190px;
  min-height: 190px;
  padding: 50px 16px 14px;
  border: 7px solid #fff1da;
  border-radius: 34px 34px 45px 45px;
  background: linear-gradient(#e98a64, #cf604d);
  box-shadow: inset 0 -18px rgba(112,51,54,.14), 0 13px 0 #9c493d, 0 20px 30px rgba(37,28,40,.25);
}

.dog-food-bin > span {
  position: absolute;
  top: 18px;
  left: 0;
  width: 100%;
  color: #fff7e6;
  text-align: center;
  font: 900 12px/1 'Inter', sans-serif;
  letter-spacing: .08em;
}

.dog-food-scoop {
  position: relative;
  width: 49px;
  height: 82px;
  margin: 4px;
  border: 4px solid #fff;
  border-radius: 24px 24px 12px 12px;
  background: #73c5b0;
  box-shadow: 0 6px 0 #3e8f7f;
  cursor: grab;
  touch-action: none;
  transition: opacity .2s ease;
}

.dog-food-scoop::before {
  content: '';
  position: absolute;
  width: 27px;
  height: 29px;
  left: 7px;
  top: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #e1a35f 0 4px, #ad6f3c 5px 7px, transparent 8px), #f1c37d;
}

.dog-food-scoop i {
  position: absolute;
  width: 11px;
  height: 40px;
  left: 15px;
  bottom: -26px;
  border: 3px solid #fff;
  border-radius: 7px;
  background: #73c5b0;
}

.dog-food-scoop.dragging { z-index: 9; cursor: grabbing; }
.dog-food-scoop.used { opacity: .18; pointer-events: none; }

.dog-bowl-target {
  position: absolute;
  right: 9%;
  bottom: 7%;
  width: 240px;
  height: 135px;
  display: grid;
  place-items: center;
  border: 8px solid #fff;
  border-radius: 45% 45% 35% 35%;
  color: #fff;
  background: #57b6b0;
  box-shadow: inset 0 -27px #3f9897, 0 12px 0 #307777, 0 20px 30px rgba(35,31,40,.25);
  font: 900 14px/1 'Outfit', sans-serif;
}

.dog-bowl-target::before {
  content: '';
  position: absolute;
  inset: 20px 27px 58px;
  border-radius: 50%;
  background: #345f63;
  box-shadow: inset 0 7px 11px rgba(0,0,0,.27);
}

.dog-bowl-target span { align-self: end; margin-bottom: 20px; }

.dog-water-station {
  position: absolute;
  right: 7%;
  bottom: 13%;
  left: 27%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(40px, 9vw, 120px);
}

.dog-water-bowl {
  position: relative;
  width: 250px;
  height: 145px;
  overflow: hidden;
  border: 9px solid #fff;
  border-radius: 42% 42% 34% 34%;
  background: #55b7b1;
  box-shadow: inset 0 -28px #3f9797, 0 13px 0 #307676, 0 20px 28px rgba(33,27,37,.24);
}

.dog-water-bowl::before {
  content: '';
  position: absolute;
  inset: 21px 29px 57px;
  z-index: 2;
  border-radius: 50%;
  background: #2d6f85;
  box-shadow: inset 0 7px 12px rgba(13,47,64,.38);
}

.dog-water-bowl i {
  position: absolute;
  right: 29px;
  bottom: 57px;
  left: 29px;
  z-index: 3;
  max-height: 55px;
  border-radius: 50%;
  background: rgba(99,211,239,.78);
  transition: height .08s linear;
}

.dog-pour-button {
  width: 155px;
  height: 175px;
  border: 7px solid #fff;
  border-radius: 35px 35px 27px 27px;
  color: #fff;
  background: #ef8069;
  box-shadow: 0 11px 0 #b95348, 0 18px 27px rgba(34,27,39,.22);
  cursor: pointer;
  touch-action: none;
}

.dog-pour-button i {
  display: block;
  width: 58px;
  height: 83px;
  margin: 4px auto 12px;
  border: 6px solid #fff;
  border-radius: 18px 18px 28px 28px;
  background: linear-gradient(180deg, #bcebf4 0 40%, #55bad6 41%);
}

.dog-pour-button span { font: 900 14px/1 'Outfit', sans-serif; }
.dog-pour-button.pouring { transform: rotate(-8deg) translateY(5px); box-shadow: 0 5px 0 #b95348; }

.dog-groom-zone {
  position: absolute;
  left: 50%;
  top: 52%;
  width: clamp(250px, 36vw, 430px);
  height: clamp(210px, 32vw, 360px);
  border: 4px dashed rgba(255,255,255,.75);
  border-radius: 48% 52% 44% 56%;
  cursor: ew-resize;
  transform: translate(-50%, -50%);
  touch-action: none;
}

.dog-groom-zone > span {
  position: absolute;
  left: 50%;
  bottom: -44px;
  padding: 8px 13px;
  border: 2px solid #fff;
  border-radius: 12px;
  color: #5a4960;
  background: rgba(255,253,247,.9);
  font: 900 12px/1 'Inter', sans-serif;
  transform: translateX(-50%);
}

.dog-brush-tool {
  position: absolute;
  left: 80%;
  top: 80%;
  width: 78px;
  height: 46px;
  margin: -23px 0 0 -39px;
  border: 5px solid #fff;
  border-radius: 45% 55% 45% 55%;
  background: #ef876d;
  box-shadow: 0 6px 0 #af5549;
  pointer-events: none;
}

.dog-brush-tool::after {
  content: '';
  position: absolute;
  width: 54px;
  height: 14px;
  left: 9px;
  bottom: -14px;
  background: repeating-linear-gradient(90deg, #fff 0 3px, transparent 3px 8px);
}

.dog-groom-zone.sparkle { box-shadow: 0 0 25px 9px rgba(255,223,91,.75); }

.dog-throw-zone {
  position: absolute;
  top: 18%;
  right: 25%;
  width: 230px;
  height: 130px;
  display: grid;
  place-items: center;
  border: 4px dashed rgba(255,255,255,.75);
  border-radius: 50%;
  color: #fff;
  background: rgba(77,152,185,.18);
  text-shadow: 0 2px 8px rgba(34,43,55,.55);
  font: 900 15px/1 'Outfit', sans-serif;
}

.dog-fetch-ball {
  position: absolute;
  right: 13%;
  bottom: 14%;
  width: 92px;
  height: 92px;
  border: 8px solid #fff;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #d9ef86, #74a942 70%);
  box-shadow: inset -12px -9px rgba(53,89,32,.18), 0 11px 0 rgba(55,72,39,.32);
  cursor: grab;
  touch-action: none;
}

.dog-fetch-ball::before,
.dog-fetch-ball::after {
  content: '';
  position: absolute;
  width: 68px;
  height: 22px;
  border: 5px solid #fff2bd;
  border-top: 0;
  border-radius: 0 0 50% 50%;
}
.dog-fetch-ball::before { left: 3px; top: 8px; transform: rotate(28deg); }
.dog-fetch-ball::after { right: 2px; bottom: 9px; transform: rotate(208deg); }
.dog-fetch-ball.dragging { z-index: 9; cursor: grabbing; }
.dog-fetch-ball.flying { animation: dogBallFly .5s ease; }

.dog-walk-path { position: absolute; inset: 125px 20px 65px 205px; }
.dog-trail-node {
  position: absolute;
  width: 58px;
  height: 58px;
  border: 6px solid #fff;
  border-radius: 50% 45% 50% 44%;
  background: rgba(255,253,247,.72);
  box-shadow: 0 7px 0 rgba(66,51,72,.18);
  cursor: pointer;
  transform: translate(-50%, -50%);
}
.dog-trail-node i::before {
  content: '';
  position: absolute;
  width: 24px;
  height: 20px;
  left: 11px;
  top: 23px;
  border-radius: 50% 50% 45% 45%;
  background: #aa9cad;
}
.dog-trail-node i::after {
  content: '•••';
  position: absolute;
  left: 11px;
  top: 2px;
  color: #aa9cad;
  font: 900 19px/1 sans-serif;
  letter-spacing: 1px;
}
.dog-trail-node.done { background: #68c39d; box-shadow: none; }
.dog-trail-node.next { background: #ffd15e; animation: dogNodePulse 1s ease-in-out infinite alternate; }

.dog-bath-surface {
  position: absolute;
  inset: 115px 30px 58px 205px;
  cursor: crosshair;
  touch-action: none;
}
.dog-mud-spot {
  position: absolute;
  width: 54px;
  height: 41px;
  border: 5px solid rgba(255,255,255,.55);
  border-radius: 55% 45% 65% 35%;
  background: rgba(145,91,53,.82);
  box-shadow: inset 5px 4px rgba(93,51,34,.2), 0 4px 8px rgba(54,35,38,.22);
  transform: translate(-50%, -50%);
}
.dog-sponge {
  position: absolute;
  left: 80%;
  top: 80%;
  width: 78px;
  height: 56px;
  margin: -28px 0 0 -39px;
  border: 6px solid #fff;
  border-radius: 19px 25px 18px 26px;
  background: #f4ce55;
  box-shadow: inset -9px -8px rgba(194,139,40,.18), 0 7px 0 #c68f36;
  pointer-events: none;
}

.dog-training-pad {
  position: absolute;
  right: 5%;
  bottom: 12%;
  width: min(470px, 50%);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.dog-training-pad button {
  min-height: 94px;
  border: 6px solid #fff;
  border-radius: 24px;
  color: #49394e;
  background: rgba(255,253,247,.92);
  box-shadow: 0 8px 0 rgba(69,52,74,.2);
  cursor: pointer;
  font: 900 16px/1 'Outfit', sans-serif;
}
.dog-training-pad button > i {
  position: relative;
  width: 36px;
  height: 31px;
  display: block;
  margin: 0 auto 8px;
  border-radius: 50% 50% 45% 45%;
  background: #ef866d;
}
.dog-training-pad button > i::before { content: '•••'; position: absolute; left: 1px; top: -22px; color: #ef866d; font: 900 25px/1 sans-serif; letter-spacing: 2px; }
.dog-training-pad button.demo { color: #fff; background: #f2c64e; transform: translateY(5px) scale(.96); box-shadow: 0 3px 0 #b28731; }
.dog-training-pad button.correct { color: #fff; background: #58bb92; }
.dog-training-pad button.wrong { background: #fff0f1; animation: adventureShake .3s ease; }
.dog-training-pad .dog-watch-button { grid-column: 1 / -1; min-height: 57px; color: #fff; background: #6d5aa5; box-shadow: 0 7px 0 #493e77; }
.dog-training-pad .dog-watch-button:disabled { opacity: .55; }

.dog-bedtime-actions {
  position: absolute;
  top: 22%;
  right: 4%;
  display: grid;
  gap: 9px;
}
.dog-bedtime-actions button {
  width: 155px;
  min-height: 72px;
  display: grid;
  grid-template-columns: 45px 1fr;
  align-items: center;
  padding: 8px;
  border: 4px solid #fff;
  border-radius: 18px;
  color: #493b51;
  background: rgba(255,253,247,.9);
  box-shadow: 0 7px 0 rgba(53,42,65,.22);
  cursor: pointer;
  font: 900 13px/1 'Outfit', sans-serif;
}
.dog-bedtime-actions i { width: 38px; height: 38px; border-radius: 50% 45% 50% 44%; background: #f1be51; box-shadow: inset -5px -4px rgba(91,58,84,.12); }
.dog-bedtime-actions button:nth-child(2) i { border-radius: 45% 45% 32% 32%; background: #63bca4; }
.dog-bedtime-actions button:nth-child(3) i { border-radius: 12px; background: repeating-linear-gradient(45deg, #ef826f 0 9px, #ffb49d 9px 18px); }
.dog-bedtime-actions button.done { color: #24765f; background: rgba(220,247,237,.94); box-shadow: none; }
.dog-pat-zone {
  position: absolute;
  left: 48%;
  top: 58%;
  width: 310px;
  height: 235px;
  border: 5px dashed rgba(255,255,255,.7);
  border-radius: 50% 50% 43% 57%;
  color: #fff;
  background: transparent;
  text-shadow: 0 2px 8px rgba(31,24,39,.7);
  cursor: pointer;
  transform: translate(-50%, -50%);
}
.dog-pat-zone span { position: absolute; left: 50%; bottom: -38px; padding: 8px 12px; border: 2px solid #fff; border-radius: 11px; background: rgba(72,55,83,.72); font: 900 12px/1 'Inter', sans-serif; transform: translateX(-50%); }
.dog-pat-zone.ready { border-color: #ffd15e; box-shadow: 0 0 28px rgba(255,209,94,.65); }
.dog-pat-zone.patting { animation: dogPat .28s ease; }

.dog-day-card,
.dog-week-finish-card {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: min(570px, calc(100% - 48px));
  padding: 27px;
  border: 4px solid #fff;
  border-radius: 28px;
  color: #493950;
  background: rgba(255,253,247,.93);
  box-shadow: 0 18px 38px rgba(30,23,36,.32);
  text-align: center;
  backdrop-filter: blur(13px);
  transform: translate(-50%, -50%);
}
.dog-day-card small,
.dog-week-finish-card small { color: #bd4f4b; font: 900 11px/1 'Inter', sans-serif; letter-spacing: .11em; text-transform: uppercase; }
.dog-day-card h3,
.dog-week-finish-card h3 { margin: 6px 0 15px; font: 900 clamp(31px, 5vw, 46px)/1 'Outfit', sans-serif; }
.dog-earned-badge { width: fit-content; display: flex; align-items: center; gap: 8px; margin: 0 auto 13px; padding: 9px 13px; border-radius: 14px; color: #8b6418; background: #fff0af; font-weight: 900; }
.dog-earned-badge i { width: 29px; height: 29px; border: 5px solid #fff; border-radius: 50%; background: #f4c552; box-shadow: 0 3px 0 #bd8d29; }
.dog-main-button {
  min-height: 55px;
  padding: 12px 20px;
  border: 4px solid #fff;
  border-radius: 17px;
  color: #fff;
  background: #ef7f68;
  box-shadow: 0 7px 0 #b84c42;
  cursor: pointer;
  font: 900 17px/1 'Outfit', sans-serif;
}
.dog-main-button:active { transform: translateY(4px); box-shadow: 0 3px 0 #b84c42; }
.dog-week-finish-card { width: min(760px, calc(100% - 48px)); display: grid; grid-template-columns: 190px 1fr; gap: 24px; align-items: center; text-align: left; }
.dog-week-finish-card > img { width: 190px; height: 190px; object-fit: cover; border: 6px solid #fff; border-radius: 31px; box-shadow: 0 9px 0 rgba(63,47,69,.15); }

@keyframes dogBallFly {
  50% { transform: translate(-260px, -310px) scale(.65) rotate(240deg); }
  100% { transform: translate(0, 0) rotate(480deg); }
}
@keyframes dogNodePulse { to { transform: translate(-50%, -50%) scale(1.16); box-shadow: 0 0 0 12px rgba(255,209,94,.25); } }
@keyframes dogPat { 50% { transform: translate(-50%, -50%) scale(.94); } }

@media (max-width: 820px) {
  .dog-life-world { min-height: 700px; }
  .dog-week { top: 10px; }
  .dog-week span { width: 30px; }
  .dog-score { top: 52px; right: 9px; }
  .dog-needs { top: 91px; left: 9px; width: 151px; padding: 8px; }
  .dog-need { grid-template-columns: 53px 1fr 21px; gap: 3px; }
  .dog-need > span,
  .dog-need strong { font-size: 8px; }
  .dog-instruction {
    top: 91px;
    min-width: 0;
    width: calc(100% - 188px);
    max-width: none;
    margin-left: 77px;
    padding: 9px 11px;
  }
  .dog-task-strip { gap: 4px; }
  .dog-task-strip span { width: 28px; padding: 7px; font-size: 0; }
  .dog-task-strip i { margin: auto; }
  .dog-feed-station,
  .dog-bath-surface { inset: 180px 15px 58px 158px; }
  .dog-food-bin { width: 155px; min-height: 170px; padding: 48px 10px 11px; }
  .dog-food-scoop { width: 40px; height: 68px; }
  .dog-bowl-target { width: 185px; height: 110px; }
  .dog-water-station { left: 18%; gap: 28px; }
  .dog-water-bowl { width: 190px; }
  .dog-pour-button { width: 125px; height: 160px; }
  .dog-walk-path { inset: 150px 12px 55px 145px; }
  .dog-training-pad { right: 3%; width: 55%; }
  .dog-bedtime-actions { top: 27%; right: 2%; }
  .dog-pat-zone { left: 42%; width: 250px; height: 205px; }
}

@media (max-width: 620px) {
  .adventure-playfield > .adventure-world,
  .adventure-playfield > .dog-life-world { min-height: 650px; }
  .dog-life-world { min-height: 650px; border-radius: 20px; }
  .dog-week { gap: 3px; padding: 5px; }
  .dog-week span { width: 25px; height: 27px; font-size: 9px; }
  .dog-score { top: 45px; padding: 7px 9px; }
  .dog-score span { display: none; }
  .dog-needs {
    top: 78px;
    right: 8px;
    left: 8px;
    width: auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    padding: 7px;
  }
  .dog-need { display: block; margin: 0; text-align: center; }
  .dog-need > span { display: block; margin-bottom: 4px; white-space: nowrap; }
  .dog-need > div { height: 7px; }
  .dog-need strong { display: none; }
  .dog-instruction {
    top: 126px;
    left: 8px;
    width: calc(100% - 16px);
    margin-left: 0;
    transform: none;
  }
  .dog-instruction strong { font-size: 16px; }
  .dog-task-strip { right: 8px; bottom: 8px; left: 8px; }
  .dog-feed-station,
  .dog-bath-surface { inset: 205px 8px 48px; }
  .dog-food-bin { left: 0; width: 135px; min-height: 150px; }
  .dog-food-scoop { width: 34px; height: 58px; margin: 2px; }
  .dog-bowl-target { right: 0; width: 145px; height: 100px; }
  .dog-water-station { right: 3%; bottom: 12%; left: 3%; gap: 18px; }
  .dog-water-bowl { width: 160px; height: 120px; }
  .dog-pour-button { width: 105px; height: 140px; }
  .dog-pour-button i { width: 45px; height: 66px; }
  .dog-groom-zone { top: 57%; width: 230px; height: 230px; }
  .dog-throw-zone { top: 31%; right: 7%; width: 150px; height: 90px; }
  .dog-fetch-ball { right: 10%; width: 76px; height: 76px; }
  .dog-walk-path { inset: 190px 5px 45px; }
  .dog-trail-node { width: 47px; height: 47px; }
  .dog-training-pad { right: 3%; bottom: 9%; width: 94%; }
  .dog-training-pad button { min-height: 72px; }
  .dog-bedtime-actions { top: 32%; right: 2%; }
  .dog-bedtime-actions button { width: 118px; min-height: 58px; grid-template-columns: 34px 1fr; padding: 5px; font-size: 10px; }
  .dog-bedtime-actions i { width: 30px; height: 30px; }
  .dog-pat-zone { left: 40%; top: 62%; width: 190px; height: 165px; }
  .dog-week-finish-card { display: block; text-align: center; }
  .dog-week-finish-card > img { width: 125px; height: 125px; margin-bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .dog-fetch-ball,
  .dog-trail-node,
  .dog-pat-zone { animation: none !important; transition: none !important; }
}

/* Shared Three.js expansion shell */
.ad3d-loading,
.adventure-game-error {
  min-height: min(68vh, 760px);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  padding: 28px;
  text-align: center;
  border-radius: 26px;
  background: linear-gradient(145deg, #fffdf8, #f3ecff);
  color: #403451;
}

.ad3d-loading span {
  width: 48px;
  height: 48px;
  border: 7px solid #e8def3;
  border-top-color: var(--activity-color, #7657c8);
  border-radius: 50%;
  animation: ad3d-spin .8s linear infinite;
}

@keyframes ad3d-spin { to { transform: rotate(1turn); } }

.ad3d-game {
  position: relative;
  width: 100%;
  height: min(72vh, 780px);
  min-height: 540px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 26px;
  background: #e9f2f3;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.72), 0 18px 38px rgba(55,42,70,.18);
  touch-action: none;
}

.ad3d-canvas,
.ad3d-game canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  touch-action: none;
}

.ad3d-stage {
  position: absolute;
  inset: 0;
}

.ad3d-hud {
  position: absolute;
  z-index: 4;
  top: clamp(12px, 2vw, 20px);
  left: clamp(12px, 2vw, 20px);
  right: clamp(12px, 2vw, 20px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}

.ad3d-hud > *,
.ad3d-chip {
  padding: 9px 13px;
  border: 2px solid rgba(68,49,82,.09);
  border-radius: 14px;
  background: rgba(255,253,248,.93);
  color: #403451;
  font: 900 13px/1.15 'Outfit', system-ui, sans-serif;
  box-shadow: 0 7px 0 rgba(55,42,70,.1);
  backdrop-filter: blur(12px);
}

.ad3d-progress {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: min(260px, 44vw);
}

.ad3d-progress i {
  flex: 1;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7dff0;
}

.ad3d-progress i::after {
  content: '';
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--activity-color, #7657c8), #ffd166);
  transition: width .24s ease;
}

.ad3d-game > .ad3d-progress {
  position: absolute;
  z-index: 4;
  top: 102px;
  left: clamp(12px, 2vw, 20px);
  width: min(310px, calc(100% - 24px));
  min-width: 0;
  height: 10px;
  padding: 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,253,248,.85);
  box-shadow: 0 3px 0 rgba(55,42,70,.1);
}

.ad3d-game > .ad3d-progress > span:only-child {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--activity-color, #7657c8), #ffd166);
  transition: width .24s ease;
}

.ad3d-panel {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: clamp(12px, 2.2vw, 24px);
  width: min(760px, calc(100% - 24px));
  transform: translateX(-50%);
  padding: clamp(12px, 2vw, 18px);
  border: 3px solid rgba(255,255,255,.84);
  border-radius: 22px;
  background: rgba(255,253,248,.95);
  color: #403451;
  box-shadow: 0 14px 0 rgba(55,42,70,.11), 0 22px 48px rgba(55,42,70,.18);
  backdrop-filter: blur(16px);
}

.ad3d-panel h3,
.ad3d-panel p { margin: 0; }

.ad3d-panel h3 {
  font: 900 clamp(19px, 2.5vw, 27px)/1.05 'Outfit', system-ui, sans-serif;
}

.ad3d-panel p {
  margin-top: 5px;
  font: 700 14px/1.35 'Inter', system-ui, sans-serif;
  color: #6b6074;
}

.ad3d-panel .ad3d-kicker {
  margin: 0 0 5px;
  color: var(--activity-color, #7657c8);
  font: 900 11px/1 'Outfit', system-ui, sans-serif;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.ad3d-title,
.ad3d-stage-count {
  margin: 0;
}

.ad3d-title {
  font: 900 clamp(17px, 2vw, 23px)/1 'Outfit', system-ui, sans-serif;
}

.ad3d-stage-count {
  color: var(--activity-color, #7657c8) !important;
  font: 900 11px/1 'Outfit', system-ui, sans-serif !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ad3d-panel .ad3d-help {
  margin-top: 9px;
  font-size: 11px;
  text-align: center;
  opacity: .78;
}

.ad3d-panel .ad3d-instruction {
  position: static;
  max-width: none;
  margin: 5px 0 0;
  padding: 0;
  transform: none;
  background: none;
  color: #6b6074;
  font-size: 13px;
  text-align: left;
  backdrop-filter: none;
}

.ad3d-sequence {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.ad3d-sequence > * {
  padding: 5px 8px;
  border-radius: 9px;
  background: #efe8f4;
  color: #5b4c68;
  font: 800 11px/1.1 'Inter', system-ui, sans-serif;
}

.ad3d-feedback {
  min-height: 18px;
  margin-top: 8px !important;
  color: #8a5260 !important;
  font-size: 12px !important;
  text-align: center;
}

.ad3d-status {
  min-height: 20px;
  color: #5f526b;
  font: 800 14px/1.3 'Inter', system-ui, sans-serif;
  text-align: center;
}

.ad3d-mopping .ad3d-canvas {
  cursor: grab;
}

.ad3d-mopping .ad3d-canvas:active {
  cursor: grabbing;
}

.ad3d-mop-tracker {
  position: absolute;
  z-index: 5;
  top: clamp(74px, 9.5vh, 96px);
  left: 50%;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 1px 9px;
  min-width: 158px;
  padding: 8px 13px 9px;
  transform: translateX(-50%);
  border: 2px solid rgba(255,255,255,.88);
  border-radius: 17px;
  background: rgba(255,253,248,.94);
  color: #443653;
  box-shadow: 0 7px 0 rgba(55,42,70,.11), 0 12px 25px rgba(55,42,70,.12);
  backdrop-filter: blur(14px);
  pointer-events: none;
}

.ad3d-mop-tracker > span {
  font: 900 12px/1 'Outfit', system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ad3d-mop-tracker > strong {
  grid-row: span 2;
  min-width: 31px;
  color: #268c91;
  font: 900 28px/.9 'Outfit', system-ui, sans-serif;
  text-align: center;
}

.ad3d-mop-tracker__dots {
  display: flex;
  gap: 4px;
  min-height: 9px;
}

.ad3d-mop-tracker__dots i {
  width: 18px;
  height: 8px;
  border-radius: 55% 45% 58% 42%;
  background: #8b5a3c;
  box-shadow: inset 0 2px rgba(255,255,255,.3);
  transition: transform .2s ease, opacity .2s ease, background .2s ease;
}

.ad3d-mop-tracker__dots i.is-clean {
  transform: scale(.72);
  background: #56c5b3;
  opacity: .38;
}

.ad3d-mop-tracker.is-clean {
  border-color: #8bddc5;
  background: rgba(235,255,247,.96);
}

.ad3d-mop-tracker.is-clean > strong {
  color: #23966d;
}

.ad3d-bug-tracker {
  position: absolute;
  z-index: 5;
  top: clamp(72px, 9vh, 92px);
  left: 50%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  min-width: 220px;
  padding: 9px 13px;
  transform: translateX(-50%);
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 18px;
  background: rgba(255,253,248,.94);
  color: #443653;
  box-shadow: 0 7px 0 rgba(55,42,70,.11), 0 12px 25px rgba(55,42,70,.13);
  backdrop-filter: blur(14px);
  pointer-events: none;
}

.ad3d-bug-tracker__label {
  color: #29906f;
  font: 900 9px/1 'Outfit', system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ad3d-bug-tracker > strong {
  font: 900 18px/1.05 'Outfit', system-ui, sans-serif;
}

.ad3d-bug-tracker [data-bug-caught] {
  color: #6e6078;
  font: 800 11px/1.15 'Inter', system-ui, sans-serif;
}

.ad3d-bug-tracker time {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  min-width: 46px;
  padding: 9px 7px;
  border-radius: 13px;
  background: #e8f8ef;
  color: #207b5d;
  font: 900 18px/1 'Outfit', system-ui, sans-serif;
  text-align: center;
}

.ad3d-bug-tracker.is-urgent time {
  background: #ffe1da;
  color: #c65049;
  animation: ad3d-bug-urgent .65s ease-in-out infinite alternate;
}

.ad3d-bug-tracker.is-complete {
  border-color: #8bddc5;
  background: rgba(235,255,247,.97);
}

@keyframes ad3d-bug-urgent {
  to { transform: scale(1.06); }
}

.ad3d-school > .ad3d-progress {
  display: none;
}

.ad3d-school-guide {
  position: absolute;
  z-index: 5;
  top: clamp(72px, 9vh, 90px);
  left: clamp(12px, 2vw, 20px);
  width: min(440px, calc(100% - 32px));
  padding: 11px 14px 12px;
  border: 2px solid rgba(255,255,255,.94);
  border-radius: 20px;
  background: rgba(255,253,246,.95);
  color: #403451;
  box-shadow: 0 7px 0 rgba(55,42,70,.11), 0 15px 32px rgba(55,42,70,.15);
  backdrop-filter: blur(15px);
  pointer-events: none;
}

.ad3d-school-guide__label {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  color: #126f83;
  background: #dff7fc;
  font: 900 10px/1 'Outfit', system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ad3d-school-guide > strong {
  display: block;
  margin: 6px 0 3px;
  color: #403451;
  font: 900 clamp(18px, 2.3vw, 24px)/1 'Outfit', system-ui, sans-serif;
}

.ad3d-school-guide > p {
  margin: 0;
  color: #6b6074;
  font: 750 12px/1.25 'Inter', system-ui, sans-serif;
}

.ad3d-school-guide__steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  margin-top: 9px;
}

.ad3d-school-guide__steps span {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 0;
  padding: 5px 3px 6px;
  border: 1px solid #e7dfeb;
  border-radius: 11px;
  background: #fff;
  color: #786b80;
}

.ad3d-school-guide__steps i {
  display: grid;
  place-items: center;
  min-width: 23px;
  height: 23px;
  padding-inline: 4px;
  border-radius: 999px;
  background: #edf5fa;
  color: #377894;
  font: 900 9px/1 'Inter', system-ui, sans-serif;
  font-style: normal;
}

.ad3d-school-guide__steps b {
  max-width: 100%;
  overflow: hidden;
  font: 800 8px/1.05 'Inter', system-ui, sans-serif;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ad3d-school-guide__steps span.is-next {
  border-color: #62c9dd;
  background: #eafaff;
  color: #1c6d80;
  box-shadow: inset 0 0 0 1px rgba(85,190,211,.2);
}

.ad3d-school-guide__steps span.is-next i {
  background: #56bed3;
  color: #fff;
}

.ad3d-school-guide__steps span.is-done {
  border-color: #8bdac2;
  background: #e9faf4;
  color: #27775f;
}

.ad3d-school-guide__steps span.is-done i {
  background: #55bf9f;
  color: #fff;
}

.ad3d-school-guide.is-complete {
  border-color: #86dac0;
  background: rgba(235,255,247,.97);
}

.ad3d-school .ad3d-panel {
  width: min(900px, calc(100% - 24px));
  padding: 10px 12px 11px;
}

.ad3d-school .ad3d-stage-count {
  display: inline-block;
  margin-right: 8px;
}

.ad3d-school .ad3d-panel h3 {
  display: inline;
  font-size: clamp(17px, 2vw, 22px);
}

.ad3d-school .ad3d-instruction,
.ad3d-school .ad3d-sequence {
  display: none;
}

.ad3d-school .ad3d-panel .ad3d-actions {
  margin-top: 8px;
}

.ad3d-school .ad3d-panel > .ad3d-actions[aria-label="Game choices"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ad3d-school .ad3d-panel > .ad3d-actions[aria-label="Game tools"] {
  grid-template-columns: 1fr 1fr;
}

.ad3d-school .ad3d-panel .ad3d-action {
  min-height: 40px;
  padding: 7px 10px;
}

.ad3d-school .ad3d-feedback:empty {
  display: none;
}

.ad3d-dress-up > .ad3d-progress {
  display: none;
}

.ad3d-dress-tracker {
  position: absolute;
  z-index: 5;
  top: clamp(72px, 9vh, 88px);
  left: clamp(12px, 2vw, 20px);
  width: min(310px, calc(100% - 32px));
  min-width: 280px;
  padding: 10px 13px 11px;
  transform: none;
  border: 2px solid rgba(255,255,255,.92);
  border-radius: 19px;
  background: rgba(255,250,245,.94);
  color: #443653;
  box-shadow: 0 7px 0 rgba(55,42,70,.11), 0 14px 30px rgba(55,42,70,.14);
  backdrop-filter: blur(14px);
  pointer-events: none;
}

.ad3d-dress-tracker__label {
  display: block;
  color: #b74b8d;
  font: 900 9px/1 'Outfit', system-ui, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.ad3d-dress-tracker > strong {
  display: block;
  margin: 3px 0 8px;
  font: 900 clamp(15px, 2vw, 20px)/1 'Outfit', system-ui, sans-serif;
}

.ad3d-dress-tracker__slots {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.ad3d-dress-tracker__slots span {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 0;
  padding: 5px 3px;
  border: 1px solid #eadce9;
  border-radius: 11px;
  background: #fff;
  color: #77687d;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.ad3d-dress-tracker__slots i {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding-inline: 4px;
  border-radius: 999px;
  background: #f6eaf4;
  color: #a14580;
  font: 900 9px/1 'Inter', system-ui, sans-serif;
  font-style: normal;
}

.ad3d-dress-tracker__slots b {
  max-width: 100%;
  overflow: hidden;
  font: 800 9px/1 'Inter', system-ui, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ad3d-dress-tracker__slots span.is-open:first-of-type {
  border-color: #e7a6d4;
  background: #fff6fc;
}

.ad3d-dress-tracker__slots span.is-done {
  border-color: #93ddc7;
  background: #eafaf4;
  color: #287d64;
  transform: translateY(-1px);
}

.ad3d-dress-tracker__slots span.is-done i {
  background: #55bf9f;
  color: #fff;
}

.ad3d-dress-tracker > small {
  display: block;
  margin-top: 6px;
  color: #77687d;
  font: 800 10px/1 'Inter', system-ui, sans-serif;
  text-align: center;
}

.ad3d-dress-tracker.is-complete {
  border-color: #8bddc5;
  background: rgba(235,255,247,.97);
}

.ad3d-dress-up .ad3d-panel > .ad3d-actions[aria-label="Game choices"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ad3d-dress-up .ad3d-panel {
  width: min(900px, calc(100% - 24px));
  padding: 10px 12px 11px;
}

.ad3d-dress-up .ad3d-stage-count {
  display: inline-block;
  margin-right: 8px;
}

.ad3d-dress-up .ad3d-panel h3 {
  display: inline;
  font-size: clamp(18px, 2.1vw, 23px);
}

.ad3d-dress-up .ad3d-instruction,
.ad3d-dress-up .ad3d-sequence {
  display: none;
}

.ad3d-dress-up .ad3d-panel .ad3d-actions {
  margin-top: 8px;
}

.ad3d-dress-up .ad3d-panel .ad3d-action {
  min-height: 40px;
  padding: 7px 10px;
}

.ad3d-dress-up .ad3d-panel > .ad3d-actions[aria-label="Game tools"] {
  grid-template-columns: 1fr 1fr;
}

.ad3d-dress-up .ad3d-action.is-complete {
  border-color: #68c8aa;
  background: linear-gradient(180deg, #effcf7, #d9f6eb);
  color: #25775f;
  box-shadow: 0 4px 0 rgba(36,132,101,.22);
  opacity: 1;
}

.ad3d-dress-up .ad3d-feedback:empty {
  display: none;
}

.ad3d-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 9px;
  margin-top: 12px;
}

.ad3d-actions--transport {
  grid-template-columns: minmax(110px, 160px) 1fr;
  align-items: center;
  margin-top: 8px;
}

.ad3d-actions--transport .ad3d-action {
  min-height: 40px;
  padding-block: 7px;
}

.ad3d-action,
.adventure-primary-button {
  min-height: 50px;
  padding: 10px 14px;
  border: 2px solid rgba(70,48,84,.1);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #f6f1f8);
  color: #403451;
  font: 900 14px/1.1 'Outfit', system-ui, sans-serif;
  box-shadow: 0 5px 0 rgba(65,48,76,.14);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.ad3d-action:hover,
.ad3d-action:focus-visible,
.adventure-primary-button:hover,
.adventure-primary-button:focus-visible {
  transform: translateY(-2px);
  border-color: var(--activity-color, #7657c8);
  box-shadow: 0 7px 0 rgba(65,48,76,.14);
  outline: none;
}

.ad3d-action:active,
.adventure-primary-button:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 rgba(65,48,76,.14);
}

.ad3d-action[disabled] {
  opacity: .52;
  cursor: not-allowed;
  transform: none;
}

.ad3d-action.is-next,
.ad3d-action[aria-current="step"] {
  border-color: var(--activity-color, #7657c8);
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--activity-color, #7657c8) 15%, #fff));
  box-shadow: 0 5px 0 color-mix(in srgb, var(--activity-color, #7657c8) 35%, rgba(65,48,76,.14));
}

.ad3d-game.is-paused .ad3d-canvas {
  filter: saturate(.7) brightness(.78);
}

.ad3d-action-primary {
  color: white;
  border-color: color-mix(in srgb, var(--activity-color, #7657c8) 76%, #382849);
  background: linear-gradient(180deg, color-mix(in srgb, var(--activity-color, #7657c8) 80%, white), var(--activity-color, #7657c8));
}

.ad3d-action__key {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  margin-right: 6px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--activity-color, #7657c8) 16%, white);
  color: var(--activity-color, #7657c8);
  font-size: 11px;
}

.ad3d-clicker .ad3d-sequence {
  display: block;
}

.ad3d-clicker .ad3d-sequence > .ad3d-clicker-meter {
  padding: 10px 12px;
  border: 2px solid color-mix(in srgb, var(--activity-color, #7657c8) 18%, white);
  border-radius: 15px;
  background: linear-gradient(135deg, #fff8dd, #eefcf8);
  box-shadow: inset 0 1px 0 #fff;
}

.ad3d-clicker-meter__top,
.ad3d-clicker-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ad3d-clicker-meter__top {
  color: #403451;
  font: 900 14px/1.1 'Outfit', system-ui, sans-serif;
}

.ad3d-clicker-meter__top span {
  padding: 4px 9px;
  border-radius: 999px;
  background: #ffe9a8;
  color: #7a5217;
  font-size: 12px;
}

.ad3d-clicker-meter__bar {
  height: 15px;
  margin: 8px 0;
  overflow: hidden;
  border: 2px solid rgba(64,52,81,.1);
  border-radius: 999px;
  background: #e8e0eb;
}

.ad3d-clicker-meter__bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #46c9a8, #78dcc7 52%, #ffd166);
  box-shadow: 0 0 14px rgba(70,201,168,.55);
  transition: width .2s ease;
}

.ad3d-clicker-stats {
  color: #65586f;
  font: 700 10px/1.15 'Inter', system-ui, sans-serif;
}

.ad3d-clicker-stats span {
  flex: 1 1 0;
  text-align: center;
}

.ad3d-clicker-stats strong {
  display: block;
  color: #403451;
  font: 900 12px/1 'Outfit', system-ui, sans-serif;
}

.ad3d-clicker-stats .is-ready strong {
  color: #168c70;
}

.ad3d-clicker-event {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 9px;
  border-radius: 10px;
  background: linear-gradient(90deg, #6145a8, #ef6d74);
  color: white;
  font: 750 10px/1.15 'Inter', system-ui, sans-serif;
  animation: ad3d-clicker-event-pulse 1.1s ease-in-out infinite alternate;
}

.ad3d-clicker-event strong {
  font: 900 12px/1 'Outfit', system-ui, sans-serif;
  letter-spacing: .04em;
}

.ad3d-clicker .ad3d-panel > .ad3d-actions[aria-label="Game choices"] {
  grid-template-columns: minmax(170px, 1.35fr) repeat(2, minmax(135px, 1fr));
}

.ad3d-clicker .ad3d-panel > .ad3d-actions--single[aria-label="Game choices"] {
  grid-template-columns: 1fr;
}

.ad3d-clicker .ad3d-panel > .ad3d-actions--double[aria-label="Game choices"] {
  grid-template-columns: minmax(170px, 1.35fr) minmax(135px, 1fr);
}

.ad3d-clicker .ad3d-panel > .ad3d-actions--clicker-shop[aria-label="Game choices"] {
  grid-template-columns: minmax(175px, 1.18fr) repeat(2, minmax(145px, 1fr));
  grid-template-rows: repeat(2, minmax(62px, auto));
}

.ad3d-actions--clicker-shop .ad3d-clicker-power {
  grid-row: 1 / span 2;
}

.ad3d-clicker .ad3d-action {
  min-height: 64px;
}

.ad3d-clicker .ad3d-action strong,
.ad3d-clicker .ad3d-action small {
  display: block;
}

.ad3d-clicker .ad3d-action strong {
  margin-top: 2px;
  font-size: 15px;
}

.ad3d-clicker .ad3d-action small {
  margin-top: 4px;
  color: #75677d;
  font: 750 10px/1.2 'Inter', system-ui, sans-serif;
}

.ad3d-clicker .ad3d-clicker-power {
  border-color: #dd664f;
  background: linear-gradient(180deg, #ff8d70, #ef664f);
  color: white;
  box-shadow: 0 6px 0 #ba4537, 0 12px 24px rgba(239,102,79,.25);
}

.ad3d-clicker .ad3d-clicker-power strong {
  font-size: 20px;
  letter-spacing: .05em;
}

.ad3d-clicker .ad3d-clicker-power small {
  color: #fff9f0;
}

.ad3d-clicker .ad3d-action.is-affordable:not(.ad3d-clicker-power) {
  border-color: #2eb695;
  background: linear-gradient(180deg, #f5fffc, #dff8ef);
  box-shadow: 0 5px 0 rgba(32,143,116,.28);
}

.ad3d-clicker .ad3d-action.is-locked {
  filter: grayscale(.55);
  opacity: .58;
}

.ad3d-clicker-bonus {
  position: absolute;
  z-index: 7;
  top: var(--bonus-y, 24%);
  left: var(--bonus-x, 72%);
  min-width: 130px;
  padding: 12px 16px;
  transform: translate(-50%, -50%) rotate(-3deg);
  border: 4px solid white;
  border-radius: 999px;
  background: radial-gradient(circle at 32% 25%, #fffbd4, #ffd35f 48%, #f29143);
  color: #4b3457;
  box-shadow: 0 0 0 7px rgba(255,218,95,.3), 0 12px 28px rgba(63,42,76,.28);
  cursor: pointer;
  touch-action: manipulation;
  animation: ad3d-clicker-bonus-bob .7s ease-in-out infinite alternate;
}

.ad3d-clicker-bonus[hidden] {
  display: none;
}

.ad3d-clicker-bonus strong,
.ad3d-clicker-bonus small {
  display: block;
}

.ad3d-clicker-bonus strong {
  font: 900 15px/1 'Outfit', system-ui, sans-serif;
}

.ad3d-clicker-bonus small {
  margin-top: 3px;
  font: 750 9px/1.1 'Inter', system-ui, sans-serif;
}

.ad3d-clicker-pop {
  position: absolute;
  z-index: 8;
  top: var(--pop-y, 52%);
  left: var(--pop-x, 50%);
  transform: translate(-50%, -50%);
  padding: 7px 11px;
  border: 3px solid white;
  border-radius: 999px;
  background: #403451;
  color: white;
  font: 900 15px/1 'Outfit', system-ui, sans-serif;
  pointer-events: none;
  animation: ad3d-clicker-pop .9s ease-out forwards;
}

.ad3d-clicker-pop.is-burst {
  background: linear-gradient(90deg, #ef6d74, #7b59cc);
}

.ad3d-clicker-pop.is-bonus,
.ad3d-clicker-pop.is-level {
  background: linear-gradient(90deg, #d99226, #ffcf55);
  color: #493451;
}

.ad3d-clicker-pop.is-upgrade {
  background: #229779;
}

@keyframes ad3d-clicker-pop {
  from { opacity: 1; transform: translate(-50%, -30%) scale(.82); }
  to { opacity: 0; transform: translate(-50%, -150%) scale(1.12); }
}

@keyframes ad3d-clicker-bonus-bob {
  from { transform: translate(-50%, -50%) rotate(-4deg) scale(.96); }
  to { transform: translate(-50%, -58%) rotate(4deg) scale(1.05); }
}

@keyframes ad3d-clicker-event-pulse {
  from { box-shadow: inset 0 0 0 rgba(255,255,255,0); }
  to { box-shadow: inset 0 0 18px rgba(255,255,255,.4); }
}

.ad3d-clicker > .ad3d-progress,
.ad3d-clicker .ad3d-hud {
  display: none;
}

.ad3d-clicker-guide {
  position: absolute;
  z-index: 6;
  top: 16px;
  left: 50%;
  width: min(620px, calc(100% - 32px));
  padding: 11px 14px 12px;
  transform: translateX(-50%);
  border: 3px solid rgba(255,255,255,.94);
  border-radius: 21px;
  background: rgba(255,253,246,.95);
  color: #403451;
  box-shadow: 0 7px 0 rgba(55,42,70,.12), 0 15px 34px rgba(34,28,62,.16);
  backdrop-filter: blur(16px);
  pointer-events: none;
}

.ad3d-clicker-guide__top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}

.ad3d-clicker-guide__top span,
.ad3d-clicker-guide__top b {
  padding: 5px 9px;
  border-radius: 999px;
  font: 900 10px/1 'Outfit', system-ui, sans-serif;
}

.ad3d-clicker-guide__top span {
  color: #176e79;
  background: #dff8f2;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ad3d-clicker-guide__top strong {
  font: 900 clamp(18px, 2.2vw, 24px)/1 'Outfit', system-ui, sans-serif;
  text-align: center;
}

.ad3d-clicker-guide__top b {
  color: #7a5217;
  background: #ffe9a8;
}

.ad3d-clicker-guide__bar {
  height: 16px;
  margin: 9px 0;
  overflow: hidden;
  border: 2px solid rgba(64,52,81,.1);
  border-radius: 999px;
  background: #e8e0eb;
}

.ad3d-clicker-guide__bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #43c5a3, #74ddc5 58%, #ffd166);
  box-shadow: 0 0 16px rgba(70,201,168,.6);
  transition: width .18s ease;
}

.ad3d-clicker-guide.is-near-launch .ad3d-clicker-guide__bar i {
  background: linear-gradient(90deg, #ff8c70, #ffd166);
}

.ad3d-clicker-guide__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.ad3d-clicker-guide__stats span {
  display: grid;
  grid-template-columns: 24px auto;
  grid-template-rows: auto auto;
  align-items: center;
  justify-content: center;
  column-gap: 6px;
  min-width: 0;
  padding: 5px 7px;
  border-radius: 11px;
  background: #f4f0f6;
  text-align: left;
}

.ad3d-clicker-guide__stats i {
  grid-row: 1 / span 2;
  width: 22px;
  height: 22px;
  border: 5px solid #66cbb2;
  border-radius: 50%;
  background: #fff;
}

.ad3d-clicker-guide__stats i.is-auto {
  border-radius: 7px;
  border-color: #77bde1;
}

.ad3d-clicker-guide__stats i.is-combo {
  border-color: #ff8b72;
  transform: rotate(45deg) scale(.82);
}

.ad3d-clicker-guide__stats i.is-crystal {
  border: 0;
  border-radius: 4px;
  background: #f1c851;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.ad3d-clicker-guide__stats b {
  overflow: hidden;
  font: 900 14px/1 'Outfit', system-ui, sans-serif;
  text-overflow: ellipsis;
}

.ad3d-clicker-guide__stats small {
  color: #716478;
  font: 750 8px/1 'Inter', system-ui, sans-serif;
  white-space: nowrap;
}

.ad3d-clicker-guide__event {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 11px;
  color: white;
  background: linear-gradient(90deg, #6246ad, #ee6f78);
  font: 750 10px/1.15 'Inter', system-ui, sans-serif;
  animation: ad3d-clicker-event-pulse 1.1s ease-in-out infinite alternate;
}

.ad3d-clicker-guide__event[hidden] {
  display: none;
}

.ad3d-clicker-guide__event strong,
.ad3d-clicker-guide__event b {
  font: 900 11px/1 'Outfit', system-ui, sans-serif;
}

.ad3d-clicker .ad3d-panel {
  bottom: 12px;
  width: min(900px, calc(100% - 24px));
  padding: 10px 12px 11px;
}

.ad3d-clicker .ad3d-stage-count {
  display: inline-block;
  margin-right: 8px;
}

.ad3d-clicker .ad3d-panel h3 {
  display: inline;
  font-size: clamp(18px, 2vw, 22px);
}

.ad3d-clicker .ad3d-instruction,
.ad3d-clicker .ad3d-sequence {
  display: none;
}

.ad3d-clicker .ad3d-panel > .ad3d-actions--clicker-shop[aria-label="Game choices"] {
  grid-template-columns: minmax(230px, 1.18fr) repeat(2, minmax(190px, 1fr));
  grid-template-rows: repeat(2, minmax(82px, auto));
  gap: 9px;
  margin-top: 8px;
}

.ad3d-clicker .ad3d-action {
  position: relative;
  min-height: 82px;
  overflow: hidden;
}

.ad3d-clicker .ad3d-action__key {
  position: absolute;
  z-index: 2;
  top: 7px;
  left: 7px;
  min-width: 19px;
  height: 19px;
  margin: 0;
  font-size: 9px;
}

.ad3d-clicker .ad3d-clicker-power {
  display: grid;
  grid-template-columns: 70px 1fr;
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 2px 10px;
  min-height: 173px;
  padding: 14px 16px;
  text-align: left;
}

.ad3d-clicker-action-icon {
  position: relative;
  grid-row: 1 / span 2;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 4px solid rgba(255,255,255,.82);
  border-radius: 18px;
  background: #eff9f6;
  box-shadow: 0 5px 0 rgba(49,45,67,.12);
}

.ad3d-clicker-action-icon i {
  display: block;
  width: 28px;
  height: 28px;
  border: 7px solid #4bc2a2;
  border-radius: 50%;
}

.ad3d-clicker-action-icon.is-power {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
}

.ad3d-clicker-action-icon.is-power i {
  width: 33px;
  height: 38px;
  border: 0;
  border-radius: 0;
  background: white;
  clip-path: polygon(54% 0, 100% 0, 69% 39%, 100% 39%, 31% 100%, 45% 55%, 12% 55%);
}

.ad3d-clicker-action-icon.is-bot i {
  width: 29px;
  height: 24px;
  border-width: 5px;
  border-radius: 8px;
  box-shadow: inset 8px 0 #fff, inset -8px 0 #fff;
}

.ad3d-clicker-action-icon.is-prism i,
.ad3d-clicker-action-icon.is-drone i {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 5px;
  background: #9b82dc;
  transform: rotate(45deg);
}

.ad3d-clicker-action-icon.is-drone i {
  border-radius: 50% 10%;
  background: #ff9a78;
}

.ad3d-clicker-action-copy {
  min-width: 0;
}

.ad3d-clicker .ad3d-action .ad3d-clicker-action-copy strong {
  margin: 0;
  color: #403451;
  font-size: 16px;
}

.ad3d-clicker .ad3d-clicker-power .ad3d-clicker-action-copy strong {
  color: white;
  font-size: 25px;
  letter-spacing: .05em;
}

.ad3d-clicker .ad3d-action .ad3d-clicker-action-copy small {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.15;
}

.ad3d-clicker .ad3d-clicker-power .ad3d-clicker-action-copy small {
  color: #fff9f0;
  font-size: 12px;
}

.ad3d-clicker .ad3d-action em {
  justify-self: start;
  padding: 5px 8px;
  border-radius: 999px;
  color: #67536e;
  background: #f2eaf3;
  font: 900 9px/1 'Inter', system-ui, sans-serif;
  font-style: normal;
}

.ad3d-clicker .ad3d-clicker-power em {
  color: #9f3f32;
  background: white;
  font-size: 11px;
}

.ad3d-clicker-upgrade {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 2px 8px;
  padding: 10px;
  text-align: left;
}

.ad3d-clicker-level {
  align-self: start;
  padding: 4px 6px;
  border-radius: 8px;
  color: #5c4e66;
  background: #eee8f2;
  font: 900 9px/1 'Inter', system-ui, sans-serif;
}

.ad3d-clicker-upgrade em {
  grid-column: 2 / span 2;
}

.ad3d-clicker .ad3d-panel > .ad3d-actions[aria-label="Game tools"] {
  grid-template-columns: 1fr 1fr;
  margin-top: 8px;
}

.ad3d-clicker .ad3d-panel > .ad3d-actions[aria-label="Game tools"] .ad3d-action {
  min-height: 40px;
  padding: 7px 10px;
}

.ad3d-clicker .ad3d-feedback {
  min-height: 14px;
  margin-top: 5px !important;
}

.ad3d-instruction {
  position: absolute;
  z-index: 4;
  top: 76px;
  left: 50%;
  max-width: min(620px, calc(100% - 28px));
  transform: translateX(-50%);
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(51,42,61,.82);
  color: white;
  font: 800 13px/1.25 'Inter', system-ui, sans-serif;
  text-align: center;
  pointer-events: none;
  backdrop-filter: blur(10px);
}

.ad3d-book-reader {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}

.ad3d-book-reader[hidden] {
  display: none;
}

.ad3d-book-reader__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(34,25,43,.68);
  backdrop-filter: blur(9px) saturate(.82);
  cursor: pointer;
  animation: ad3d-book-reader-fade .22s ease-out both;
}

.ad3d-book-reader__sheet {
  position: relative;
  width: min(820px, calc(100% - 12px));
  max-height: calc(100% - 12px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 13px;
  overflow: auto;
  padding: clamp(18px, 3vw, 30px);
  border: 6px solid #f5d7a5;
  border-radius: 28px 28px 40px 40px;
  background: linear-gradient(90deg, #fff8e7 0 49.4%, #e8cfa5 49.5% 50.5%, #fffdf5 50.6%);
  color: #44344e;
  box-shadow: 0 20px 0 rgba(103,66,52,.3), 0 34px 70px rgba(25,17,33,.46);
  animation: ad3d-book-reader-pull .32s cubic-bezier(.2,.85,.25,1.08) both;
  touch-action: pan-y;
}

.ad3d-book-reader__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 13px;
  border-bottom: 2px solid #ead8b7;
}

.ad3d-book-reader__header span {
  display: block;
  margin-bottom: 5px;
  color: #b65e57;
  font: 900 12px/1 'Inter', system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ad3d-book-reader__header h3 {
  margin: 0;
  font: 900 clamp(25px, 4vw, 39px)/1.05 'Outfit', system-ui, sans-serif;
}

.ad3d-book-reader__close {
  min-width: 72px;
  min-height: 44px;
  padding: 8px 13px;
  border: 2px solid #dbc9d8;
  border-radius: 13px;
  background: #fff;
  color: #51435a;
  font: 900 13px/1 'Outfit', system-ui, sans-serif;
  box-shadow: 0 4px 0 rgba(67,49,77,.14);
  cursor: pointer;
  touch-action: manipulation;
}

.ad3d-book-reader__page {
  min-height: clamp(260px, 42vh, 430px);
  display: grid;
  place-items: center;
  padding: clamp(24px, 6vw, 64px);
  border: 3px solid #eadbbf;
  border-radius: 8px 20px 28px 8px;
  outline: none;
  background:
    linear-gradient(90deg, rgba(192,151,100,.1), transparent 5%),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(211,190,158,.18) 47px),
    #fffefa;
  box-shadow: inset 14px 0 20px rgba(133,92,57,.08);
}

.ad3d-book-reader__page:focus-visible {
  border-color: #9d73c2;
  box-shadow: 0 0 0 5px rgba(157,115,194,.2), inset 14px 0 20px rgba(133,92,57,.08);
}

.ad3d-book-reader__page p {
  max-width: 680px;
  margin: 0;
  color: #3f3348;
  font: 800 clamp(28px, 4.7vw, 46px)/1.38 'Outfit', system-ui, sans-serif;
  text-align: center;
  text-wrap: balance;
}

.ad3d-book-reader__status {
  min-height: 18px;
  margin: 0;
  color: #7c697e;
  font: 800 12px/1.3 'Inter', system-ui, sans-serif;
  text-align: center;
}

.ad3d-book-reader__actions {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 10px;
}

.ad3d-books.is-reading .ad3d-canvas {
  filter: brightness(.72) saturate(.82);
  transform: scale(1.015);
  transition: filter .22s ease, transform .28s ease;
}

@keyframes ad3d-book-reader-pull {
  from { opacity: 0; transform: translateY(12%) scale(.82) rotateX(10deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotateX(0); }
}

@keyframes ad3d-book-reader-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ad3d-fruit-workflow {
  position: absolute;
  z-index: 7;
  top: 76px;
  left: 50%;
  width: min(600px, calc(100% - 28px));
  display: grid;
  gap: 5px;
  transform: translateX(-50%);
  padding: 10px 14px 11px;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 19px;
  background: rgba(255,252,244,.93);
  color: #49384f;
  box-shadow: 0 8px 0 rgba(94,67,67,.14), 0 16px 28px rgba(68,46,45,.18);
  text-align: center;
  pointer-events: none;
  backdrop-filter: blur(12px) saturate(1.15);
}

.ad3d-fruit-workflow__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.ad3d-fruit-workflow__steps span {
  min-height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 7px;
  border: 2px solid #e6dbe6;
  border-radius: 999px;
  background: #fff;
  color: #746578;
  font: 900 11px/1 'Outfit', system-ui, sans-serif;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.ad3d-fruit-workflow__steps b {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eee6ef;
  color: #6c5a70;
  font: 900 10px/1 'Inter', system-ui, sans-serif;
}

.ad3d-fruit-workflow__steps span.is-current {
  border-color: #f17b68;
  background: #fff0ea;
  color: #8b403b;
}

.ad3d-fruit-workflow__steps span.is-current b {
  background: #f17b68;
  color: #fff;
}

.ad3d-fruit-workflow__steps span.is-done {
  border-color: #7ccdbb;
  background: #e9faf5;
  color: #277466;
}

.ad3d-fruit-workflow__steps span.is-done b {
  background: #59bba5;
  color: #fff;
}

.ad3d-fruit-workflow strong {
  display: block;
  font: 900 clamp(17px, 2.4vw, 24px)/1.08 'Outfit', system-ui, sans-serif;
  text-wrap: balance;
}

.ad3d-fruit-workflow small {
  color: #826f81;
  font: 800 10px/1.1 'Inter', system-ui, sans-serif;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.ad3d-wood-guide {
  position: absolute;
  z-index: 7;
  top: 70px;
  left: 50%;
  width: min(660px, calc(100% - 28px));
  display: grid;
  gap: 7px;
  transform: translateX(-50%);
  padding: 11px 14px 12px;
  border: 3px solid rgba(255,255,255,.94);
  border-radius: 20px;
  background: rgba(255,252,242,.95);
  color: #49384f;
  box-shadow: 0 8px 0 rgba(76,55,52,.16), 0 18px 34px rgba(48,34,41,.2);
  text-align: center;
  pointer-events: none;
  backdrop-filter: blur(12px) saturate(1.15);
}

.ad3d-wood-guide__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.ad3d-wood-guide__steps span {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px solid #e5dce4;
  border-radius: 999px;
  background: #fff;
  color: #766979;
  font: 900 11px/1 'Outfit', system-ui, sans-serif;
}

.ad3d-wood-guide__steps b {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eee7ef;
  font: 900 10px/1 'Inter', system-ui, sans-serif;
}

.ad3d-wood-guide__steps .is-current {
  border-color: #e39b45;
  background: #fff3d8;
  color: #764a18;
}

.ad3d-wood-guide__steps .is-current b {
  background: #e99b39;
  color: #fff;
}

.ad3d-wood-guide__steps .is-done {
  border-color: #66c69c;
  background: #e9faf1;
  color: #237253;
}

.ad3d-wood-guide__steps .is-done b {
  background: #4ab483;
  color: #fff;
}

.ad3d-wood-guide > strong {
  font: 900 clamp(18px, 2.6vw, 27px)/1.05 'Outfit', system-ui, sans-serif;
  text-wrap: balance;
}

.ad3d-wood-meter {
  position: relative;
  height: 25px;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 999px;
  background: linear-gradient(90deg, #ef756e, #f2bd55 24%, #f2bd55 76%, #ef756e);
  box-shadow: inset 0 2px 5px rgba(65,42,46,.22), 0 2px 0 rgba(65,42,46,.1);
  opacity: .38;
  transition: opacity .18s ease, transform .18s ease;
}

.ad3d-wood-meter.is-active {
  opacity: 1;
  transform: scaleY(1.08);
}

.ad3d-wood-meter i {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 12%;
  border-inline: 3px solid rgba(21,111,74,.34);
  background: linear-gradient(180deg, #79e2a9, #37b97d);
  box-shadow: 0 0 18px rgba(47,185,123,.72);
}

.ad3d-wood-meter b {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 32px;
  transform: translate(-50%, -50%);
  border: 2px solid #6d4c16;
  border-radius: 999px;
  background: #ffe065;
  box-shadow: 0 0 0 3px #fff, 0 3px 8px rgba(52,36,38,.25);
}

.ad3d-wood-guide.is-ready {
  border-color: #72d3a4;
  background: rgba(240,255,247,.97);
  box-shadow: 0 8px 0 rgba(42,143,98,.22), 0 0 34px rgba(75,212,148,.5);
}

.ad3d-wood-guide.is-ready > strong {
  color: #12794e;
  font-size: clamp(25px, 4vw, 39px);
}

.ad3d-wood-guide.is-ready .ad3d-wood-meter {
  animation: ad3d-wood-ready-pulse .42s ease-in-out infinite alternate;
}

.ad3d-wood-guide small {
  color: #796a78;
  font: 800 10px/1.15 'Inter', system-ui, sans-serif;
}

.ad3d-game--maker .ad3d-actions:has(.ad3d-wood-action) {
  grid-template-columns: minmax(0, 1fr);
}

.ad3d-wood-action {
  min-height: 64px;
  border-color: #d79845;
  background: linear-gradient(180deg, #fff8e8, #ffe5ad);
  color: #5a421f;
  font-size: 17px;
}

.ad3d-wood-action.is-ready {
  border-color: #239966;
  background: linear-gradient(180deg, #74dfa9, #3eba82);
  color: #123e2d;
  box-shadow: 0 6px 0 #21845a, 0 0 24px rgba(57,190,129,.46);
}

@keyframes ad3d-wood-ready-pulse {
  from { filter: brightness(1); }
  to { filter: brightness(1.12); }
}

@media (max-width: 760px), (max-height: 720px) {
  .ad3d-game {
    height: calc(100dvh - 178px);
    min-height: 430px;
    border-radius: 20px;
  }

  .ad3d-panel {
    bottom: 8px;
    width: calc(100% - 16px);
    padding: 11px;
    border-radius: 17px;
  }

  .ad3d-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .ad3d-school-guide {
    top: 68px;
    left: 10px;
    width: min(430px, calc(100% - 20px));
    padding: 8px 10px 9px;
  }

  .ad3d-school-guide > strong {
    margin-top: 4px;
    font-size: 16px;
  }

  .ad3d-school-guide > p {
    font-size: 10px;
  }

  .ad3d-school-guide__steps {
    margin-top: 6px;
  }

  .ad3d-school-guide__steps span {
    padding: 3px 2px 4px;
  }

  .ad3d-school-guide__steps i {
    min-width: 20px;
    height: 20px;
    font-size: 8px;
  }

  .ad3d-school-guide__steps b {
    font-size: 7px;
  }

  .ad3d-school .ad3d-panel > .ad3d-actions[aria-label="Game choices"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ad3d-dress-tracker {
    top: 68px;
    left: 10px;
    width: min(300px, calc(100% - 20px));
    min-width: 0;
    padding: 8px 10px 9px;
  }

  .ad3d-dress-tracker > strong {
    margin-bottom: 6px;
    font-size: 15px;
  }

  .ad3d-dress-tracker__slots span {
    padding: 3px 2px;
  }

  .ad3d-dress-tracker__slots i {
    min-width: 21px;
    height: 21px;
    font-size: 8px;
  }

  .ad3d-dress-tracker > small {
    display: none;
  }

  .ad3d-dress-up .ad3d-panel > .ad3d-actions[aria-label="Game choices"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ad3d-action { min-height: 44px; padding: 8px; }
  .ad3d-book-reader {
    padding: 9px;
  }
  .ad3d-book-reader__sheet {
    width: 100%;
    max-height: 100%;
    gap: 9px;
    padding: 15px;
    border-width: 4px;
    border-radius: 20px 20px 28px 28px;
  }
  .ad3d-book-reader__header {
    padding-bottom: 9px;
  }
  .ad3d-book-reader__page {
    min-height: clamp(210px, 39vh, 340px);
    padding: 22px;
  }
  .ad3d-book-reader__page p {
    font-size: clamp(25px, 6vw, 37px);
  }
  .ad3d-book-reader__actions {
    grid-template-columns: 1fr 1fr;
  }
  .ad3d-clicker .ad3d-panel > .ad3d-actions[aria-label="Game choices"] {
    grid-template-columns: 1.15fr 1fr;
  }
  .ad3d-clicker .ad3d-panel > .ad3d-actions--clicker-shop[aria-label="Game choices"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }
  .ad3d-actions--clicker-shop .ad3d-clicker-power {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .ad3d-clicker .ad3d-panel > .ad3d-actions--single[aria-label="Game choices"] {
    grid-template-columns: 1fr;
  }
  .ad3d-clicker .ad3d-clicker-power {
    grid-row: span 2;
  }
  .ad3d-clicker .ad3d-actions--single .ad3d-clicker-power {
    grid-row: auto;
  }
  .ad3d-fruit-workflow {
    top: 68px;
    width: min(520px, calc(100% - 18px));
    gap: 3px;
    padding: 7px 9px 8px;
    border-radius: 15px;
  }
  .ad3d-fruit-workflow__steps {
    gap: 4px;
  }
  .ad3d-fruit-workflow__steps span {
    min-height: 25px;
    padding: 3px 5px;
    font-size: 10px;
  }
  .ad3d-fruit-workflow__steps b {
    width: 17px;
    height: 17px;
    font-size: 9px;
  }
  .ad3d-fruit-workflow strong {
    font-size: clamp(15px, 4vw, 20px);
  }
  .ad3d-mop-tracker {
    top: 64px;
    min-width: 142px;
    padding: 7px 10px 8px;
  }
  .ad3d-mop-tracker > strong {
    font-size: 24px;
  }
  .ad3d-bug-tracker {
    top: 63px;
    min-width: 196px;
    padding: 7px 10px;
  }
  .ad3d-bug-tracker > strong {
    font-size: 16px;
  }
  .ad3d-bug-tracker time {
    min-width: 42px;
    padding: 8px 6px;
    font-size: 16px;
  }
  .ad3d-wood-guide {
    top: 66px;
    width: min(560px, calc(100% - 18px));
    gap: 4px;
    padding: 8px 10px 9px;
    border-radius: 16px;
  }
  .ad3d-wood-guide__steps {
    gap: 4px;
  }
  .ad3d-wood-guide__steps span {
    min-height: 26px;
    font-size: 10px;
  }
  .ad3d-wood-guide__steps b {
    width: 17px;
    height: 17px;
    font-size: 9px;
  }
  .ad3d-wood-guide > strong {
    font-size: clamp(16px, 4.2vw, 22px);
  }
  .ad3d-wood-guide.is-ready > strong {
    font-size: clamp(22px, 6vw, 32px);
  }
  .ad3d-wood-meter {
    height: 21px;
  }
  .ad3d-clicker-stats {
    gap: 4px;
  }
  .ad3d-instruction { top: 66px; }
}

@media (prefers-reduced-motion: reduce) {
  .ad3d-loading span { animation-duration: 1.8s; }
  .ad3d-action,
  .ad3d-progress i::after { transition: none; }
  .ad3d-clicker-bonus,
  .ad3d-clicker-pop,
  .ad3d-clicker-event,
  .ad3d-book-reader__backdrop,
.ad3d-book-reader__sheet,
.ad3d-bug-tracker.is-urgent time,
.ad3d-wood-guide.is-ready .ad3d-wood-meter { animation: none; }
}

@media (max-width: 760px) {
  .ad3d-clicker-guide {
    top: 9px;
    width: calc(100% - 18px);
    padding: 8px 10px 9px;
    border-radius: 17px;
  }

  .ad3d-clicker-guide__top {
    gap: 5px;
  }

  .ad3d-clicker-guide__top strong {
    font-size: 16px;
  }

  .ad3d-clicker-guide__top span,
  .ad3d-clicker-guide__top b {
    padding: 4px 6px;
    font-size: 8px;
  }

  .ad3d-clicker-guide__stats span {
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    padding: 4px 3px;
    text-align: center;
  }

  .ad3d-clicker-guide__stats i {
    display: none;
  }

  .ad3d-clicker .ad3d-panel > .ad3d-actions--clicker-shop[aria-label="Game choices"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .ad3d-actions--clicker-shop .ad3d-clicker-power {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 80px;
  }

  .ad3d-clicker-upgrade {
    min-height: 76px;
  }
}

/* A 3D game must occupy the full flexible playfield. The old fixed 72vh
   child left a large mint-colored dead zone on portrait iPads and tall
   desktop windows even though the outer game card correctly filled the
   screen. Stretching the child from its parent keeps every pack responsive
   without giving the renderer a device-specific height. */
.adventure-playfield.adventure-playfield--3d {
  display: flex;
  align-items: stretch;
}

.adventure-playfield--3d > .ad3d-game {
  flex: 1 1 auto;
  height: auto;
  align-self: stretch;
}

/* Mopping is direct manipulation, so its controls live over the unused
   cabinet/wall area instead of covering the floor the child must scrub. */
.ad3d-mopping .ad3d-panel {
  top: clamp(136px, 17vh, 158px);
  right: clamp(10px, 1.6vw, 18px);
  bottom: auto;
  left: auto;
  width: min(430px, calc(100% - 24px));
  padding: 10px;
  transform: none;
  border-radius: 18px;
}

.ad3d-mopping .ad3d-panel .ad3d-kicker,
.ad3d-mopping .ad3d-panel .ad3d-status {
  display: none;
}

.ad3d-mopping .ad3d-panel h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.ad3d-mopping .ad3d-panel .ad3d-actions {
  grid-template-columns: minmax(120px, 1.25fr) repeat(2, minmax(92px, 1fr));
  gap: 6px;
  margin-top: 0;
}

.ad3d-mopping .ad3d-panel .ad3d-action {
  min-height: 40px;
  padding: 7px 8px;
  border-radius: 11px;
  font-size: 12px;
}

.ad3d-mopping .ad3d-panel .ad3d-action-primary {
  grid-column: auto;
  color: #174d51;
  border-color: #49b8bb;
  background: linear-gradient(180deg, #a8eeeb, #66cecd);
}

@media (max-width: 520px) {
  .ad3d-mopping .ad3d-panel {
    top: 132px;
    right: 8px;
    width: calc(100% - 16px);
    padding: 8px;
  }

  .ad3d-mopping .ad3d-panel h3 {
    margin-bottom: 6px;
    font-size: 16px;
  }

  .ad3d-mopping .ad3d-panel .ad3d-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ad3d-mopping .ad3d-panel .ad3d-action-primary {
    grid-column: auto;
  }
}

/* The reactor itself is the Clicker button. Keep its upgrade shelf short so
   the large 3D POWER target is never buried under a duplicate HTML control. */
.ad3d-clicker .ad3d-panel {
  bottom: 10px;
  width: min(930px, calc(100% - 20px));
  padding: 9px 10px 10px;
}

.ad3d-clicker .ad3d-panel h3 {
  padding-right: 190px;
  font-size: clamp(17px, 1.8vw, 21px);
}

.ad3d-clicker .ad3d-panel > .ad3d-clicker-upgrade-shelf[aria-label="Game choices"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto;
  gap: 7px;
  margin-top: 7px;
}

.ad3d-clicker .ad3d-clicker-upgrade {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  min-height: 70px;
  padding: 7px;
}

.ad3d-clicker .ad3d-clicker-upgrade .ad3d-clicker-action-icon {
  width: 40px;
  height: 40px;
  border-width: 3px;
  border-radius: 13px;
}

.ad3d-clicker .ad3d-clicker-upgrade .ad3d-clicker-action-icon i {
  transform: scale(.78);
}

.ad3d-clicker .ad3d-clicker-upgrade .ad3d-clicker-action-copy strong {
  font-size: 14px;
}

.ad3d-clicker .ad3d-clicker-upgrade .ad3d-clicker-action-copy small {
  font-size: 9px;
}

.ad3d-clicker .ad3d-clicker-upgrade em {
  padding: 4px 7px;
}

.ad3d-clicker .ad3d-panel > .ad3d-actions[aria-label="Game tools"] {
  position: absolute;
  top: 7px;
  right: 9px;
  width: 176px;
  gap: 5px;
  margin: 0;
}

.ad3d-clicker .ad3d-panel > .ad3d-actions[aria-label="Game tools"] .ad3d-action {
  min-height: 32px;
  padding: 5px 7px;
  font-size: 11px;
}

.ad3d-clicker .ad3d-feedback {
  min-height: 13px;
  margin-top: 4px !important;
  font-size: 10px !important;
}

@media (max-width: 760px) {
  .ad3d-clicker .ad3d-panel h3 {
    padding-right: 0;
  }

  .ad3d-clicker .ad3d-panel > .ad3d-clicker-upgrade-shelf[aria-label="Game choices"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .ad3d-clicker .ad3d-clicker-upgrade {
    min-height: 62px;
  }

  .ad3d-clicker .ad3d-panel > .ad3d-actions[aria-label="Game tools"] {
    position: static;
    width: auto;
    margin-top: 6px;
  }
}