@keyframes icon-bob { from { transform:translateY(0) rotate(-6deg); } to { transform:translateY(-3px) rotate(6deg); } }
html[data-reduced-motion='true'] .mode-button:hover .mode-icon { animation:none; }
/* Now and then a manta glides far away and a jellyfish drifts up between the ruins. */
.ocean-ray, .ocean-jelly { position:absolute; pointer-events:none; }
.ocean-ray { top:18%; left:0; width:clamp(90px,11vw,170px); opacity:0; filter:blur(1.5px); animation:ray-glide 55s linear -8s infinite; }
.ocean-ray svg { display:block; width:100%; animation:ray-flap 3.2s ease-in-out infinite; transform-origin:50% 40%; }
@keyframes ray-glide { 0% { transform:translate(-200px, 40px); opacity:0; } 4% { opacity:.38; } 30% { transform:translate(calc(100vw + 40px), -50px); opacity:.38; } 31%,100% { transform:translate(calc(100vw + 200px), -50px); opacity:0; } }
@keyframes ray-flap { 0%,100% { transform:scaleY(1); } 50% { transform:scaleY(.72); } }
.ocean-jelly { bottom:-90px; left:78%; width:clamp(30px,3.2vw,50px); opacity:.85; animation:jelly-rise 46s linear -10s infinite; }
.ocean-jelly svg { display:block; width:100%; overflow:visible; }
.jelly-bell { transform-origin:50% 30%; animation:jelly-pulse 1.8s ease-in-out infinite; }
.jelly-legs { transform-origin:50% 0; animation:jelly-legs 1.8s ease-in-out infinite; }
@keyframes jelly-rise { 0% { transform:translate(0,0); opacity:0; } 6% { opacity:.85; } 45% { transform:translate(-6vw,-110vh); opacity:.85; } 46%,100% { transform:translate(-6vw,-130vh); opacity:0; } }
@keyframes jelly-pulse { 0%,100% { transform:scale(1,1); } 40% { transform:scale(.86,1.1); } }
@keyframes jelly-legs { 0%,100% { transform:scaleY(1); } 40% { transform:scaleY(1.12) skewX(4deg); } }
html[data-calm='true'] :is(.ocean-ray,.ocean-jelly), html[data-reduced-motion='true'] :is(.ocean-ray,.ocean-jelly) { display:none; }
body[data-screen='play'] .ocean-jelly { left:92%; }
/* The feeding tip sits on the bright wooden shelf: a dark glass pill keeps it readable. */
.aquarium-tools > span { padding:7px 14px; border-radius:999px; background:rgba(6,52,82,.78); color:#fff; text-shadow:none; box-shadow:0 3px 10px rgba(0,30,50,.35); }
/* Reset progress: quiet until armed, then red and pulsing while it waits for the confirming tap. */
#btn-reset-progress { margin-top:6px; color:#a3263b; border-color:rgba(163,38,59,.4); }
#btn-reset-progress.is-armed, #btn-reset-progress.is-armed:hover:not(:disabled) { color:#fff; background:#d2364f; background-image:none; border-color:#a3263b; box-shadow:0 4px 0 #8a1c2f; animation:reset-pulse .6s ease-in-out infinite alternate; }
@keyframes reset-pulse { to { transform:scale(1.04); } }
html[data-reduced-motion="true"] #btn-reset-progress.is-armed { animation:none; }
/* "Tap to start" sits on bright sand: a deep-sea pill keeps white text readable. */
.tap-start-text { padding:10px 30px; border:2px solid rgba(220,252,255,.85); border-radius:999px; background:rgba(5,58,92,.82); color:#fff; text-shadow:none; box-shadow:0 5px 0 rgba(2,36,60,.6), 0 12px 28px rgba(0,30,55,.4); }
@media (max-width:600px), (max-aspect-ratio:82/100) { .tap-start-text { font-size:24px; padding:7px 20px; letter-spacing:.06em; } }
/* End of ocean.css */
/* Dino Words: visual skin layered over the shared, unchanged game layout. */
:root {
  --ink: #4d2918;
  --ink-soft: #76503b;
  --card: #fff7e6;
  --card-2: #fff0d1;
  --card-edge: #e7c99c;
  --syn: #70b83d;
  --syn-deep: #428c29;
  --brand-rgb: 109, 174, 61;
  --brand-hi: #89cd48;
  --brand-edge: #4b8e2d;
  --play-edge: #d8b77e;
  --action-top: #6fbc35;
  --action-bottom: #419122;
  --action-edge: #326a1d;
  --action-ring: #d9f5a4;
  --mk-0: 151, 224, 115;
  --mk-1: 255, 202, 105;
  --mk-2: 180, 221, 127;
  --mk-3: 255, 177, 145;
  --mk-4: 253, 230, 138;
  --sel: 151, 224, 115;
}
.ocean-backdrop {
  background: #9bd9e1;
}
.ocean-scene {
  background-image: url("./dino-scene-DRvtTvCD.webp");
}
@media (orientation: portrait) {
  .ocean-scene {
    background-image: url("./dino-scene-DRvtTvCD.webp");
  }
}
.ocean-light,
.ocean-caustics,
.ocean-bubbles,
.ocean-fish,
.ocean-ray,
.ocean-jelly,
.ocean-foreground {
  display: none !important;
}
.dino-mascot {
  position: absolute;
  z-index: 1;
  bottom: clamp(-130px, -8.5vw, -55px);
  width: clamp(330px, 36vw, 540px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 10px 8px #34521a66);
  animation: dino-breathe 4s ease-in-out infinite alternate;
  transform: translate3d(
    calc(var(--ocean-x, 0px) * 2),
    calc(var(--ocean-y, 0px) * 1.5),
    0
  );
  transition: transform 1s ease-out;
}
.dino-rex {
  left: clamp(-165px, -11vw, -85px);
  transform-origin: bottom center;
}
.dino-trike {
  right: clamp(-165px, -11vw, -85px);
  transform-origin: bottom center;
  animation-delay: -2s;
}
body:not([data-screen="menu"]):not([data-screen="boot"]) .dino-mascot {
  width: clamp(230px, 24vw, 350px);
  bottom: clamp(-115px, -7vw, -55px);
  opacity: 0.96;
}
@keyframes dino-breathe {
  from {
    translate: 0 0;
  }
  to {
    translate: 0 -7px;
  }
}
html[data-reduced-motion="true"] .dino-mascot,
html[data-calm="true"] .dino-mascot {
  animation: none;
  transform: none;
  transition: none;
}
@media (max-aspect-ratio: 82/100) {
  .dino-mascot {
    width: clamp(220px, 58vw, 300px);
    bottom: -45px;
  }
  .dino-rex {
    left: -75px;
  }
  .dino-trike {
    right: -75px;
  }
  body:not([data-screen="menu"]):not([data-screen="boot"]) .dino-mascot {
    width: clamp(170px, 45vw, 230px);
    bottom: -65px;
  }
}
#screen-menu .aurora-logo {
  width: min(650px, 70vw);
}
.mode-button {
  background: linear-gradient(#fff9e8, #f8eacb);
  border-color: #fff6d6;
  color: #53321b;
  box-shadow:
    0 5px 0 #c7a575,
    0 10px 20px #37200944;
}
.mode-button.mode-quick {
  color: #fff;
  background: linear-gradient(#83ce44, #53a627);
  border-color: #d8f6a9;
  box-shadow:
    0 5px 0 #387a1d,
    0 10px 20px #37200944;
}
.mode-icon svg {
  display: none;
}
.mode-icon::before {
  content: "🌿";
  font-size: 24px;
}
#btn-play .mode-icon::before {
  content: "▶";
  font-size: 21px;
  color: white;
}
#btn-campaign .mode-icon::before {
  content: "🥚";
}
#btn-aquarium .mode-icon::before {
  content: "🦖";
}
#btn-daily .mode-icon::before {
  content: "☀️";
}
.sheet {
  background: linear-gradient(145deg, #fff8e5, #f9e7bf);
  background-blend-mode: normal;
  border: 3px solid #fff5d9;
  box-shadow:
    0 0 0 4px #bda16b88,
    0 8px 0 #b89768,
    inset 0 2px 12px #fff9,
    0 22px 45px #593b1d55;
  backdrop-filter: none;
  animation: none;
}
.screen.is-entering .sheet {
  animation: deal-in 0.6s var(--back) backwards;
}
.cells span {
  color: #4e2e1d;
}
.readout,
.hud-centre {
  background: rgba(255, 248, 226, 0.94);
  border-color: #fff5d6;
  color: #51301a;
  box-shadow:
    0 3px 0 #c9aa78,
    0 8px 20px #482b1433;
}
.readout-label,
.readout-value,
.readout-icon,
.hud-centre .progress-label {
  color: #51301a;
}
.hud-centre .seg {
  border-color: #9b7f58;
  background: #e9d6ad;
}
.hud-centre .seg.is-good {
  background: #72ba43;
  border-color: #478f2c;
}
.word-list li {
  color: #50301e;
  background: #fff8e6;
}
.word-list li::before {
  border-color: #d6bd8b;
}
.icon-btn {
  color: #547b32;
}
.aquarium-room {
  background: url("./dino-scene-DRvtTvCD.webp") center / cover no-repeat;
}
.aquarium-tank {
  border-color: #ffedbf;
  box-shadow: 0 12px 32px #49341788;
  background: url("./dino-scene-DRvtTvCD.webp") center / cover no-repeat;
}
.aquarium-tank::before {
  display: none;
}
.aquarium-progress {
  color: #4d321d;
  box-shadow:
    0 3px 0 #bb9d6b,
    0 5px 14px #49341755;
}
#aquarium-remaining {
  color: #775a3b;
}
.aquarium-tools,
.aquarium-top-title {
  text-shadow: 0 2px 7px #4d3013;
}
.aquarium-empty {
  background: rgba(255, 249, 230, 0.94);
  color: #54391f;
}
.aquarium-fish.is-playing::after {
  border-color: #ffe082;
  box-shadow:
    -12px 12px 0 -2px #ffe082,
    13px 7px 0 -2px #ffe082;
}
.fish-reward[open] {
  overflow-x: hidden;
  border-color: #f5e1b0;
  background: linear-gradient(#fffdf4, #fff0c9);
  color: #563718;
  box-shadow:
    0 12px 0 #a88048,
    0 22px 55px #49301999;
}
.reward-bubble::before {
  background: radial-gradient(circle at 30% 23%, #fffbe6, #d2efaa 62%, #86be63);
  box-shadow:
    inset -8px -10px 18px #6e9c5a7a,
    0 0 25px #c7f18b;
}
.reward-name {
  color: #53842d;
}
.mode-button.mode-quick {
  background: linear-gradient(#fff4b1, #ffd451);
  border-color: #fff7ce;
  color: #53321b;
  box-shadow:
    0 5px 0 #b68b2e,
    0 10px 20px #37200944;
}
#btn-play .mode-icon::before {
  color: #53321b;
}
.aquarium-tank {
  background-image: url("./dino-nursery-B01kB3fX.webp");
}
.aquarium-fish:not(:disabled) {
  width: calc(clamp(65px, 13%, 145px) * var(--z, 1));
  height: calc(clamp(60px, 20%, 125px) * var(--z, 1));
}
@media (max-aspect-ratio: 82/100) {
  .aquarium-fish:not(:disabled) {
    width: 23%;
    height: 16%;
  }
}
.theme-reveal .tr-window,
body[data-orient="port"] .theme-reveal .tr-window {
  border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
  border-color: #ffedc0;
  background:
    radial-gradient(circle at 20% 32%, #e5bd7b 0 3%, transparent 3.5%),
    radial-gradient(circle at 80% 60%, #e5bd7b 0 4%, transparent 4.5%),
    radial-gradient(circle at 32% 78%, #e5bd7b 0 3%, transparent 3.5%),
    linear-gradient(145deg, #fffdf0, #ffe6b2);
  box-shadow:
    inset -12px -16px 32px #b68b4a55,
    0 14px 32px #49341766;
}
.theme-reveal .tr-label {
  color: #6d4c2d;
}
.theme-reveal.is-landed .tr-window {
  box-shadow:
    inset -12px -16px 32px #b68b4a55,
    0 0 35px #fff0aacc,
    0 14px 32px #49341766;
}
.curtain {
  background: linear-gradient(160deg, #3c852c, #77bc45 54%, #376c25);
}
.curtain i,
.curtain i:nth-child(n) {
  border-radius: 85% 5% 85% 5%;
  border: 2px solid #d7ed9c;
  background: linear-gradient(135deg, #d8f188, #6bad37);
  box-shadow: inset 2px 2px 7px #f7ffbb88;
}
.tutor-hand {
  filter: sepia(0.5) saturate(0.8) hue-rotate(325deg)
    drop-shadow(0 5px 5px #4b2d1d66);
}
@media (orientation: portrait) {
  .ocean-scene {
    background-image: url("./dino-portrait-D0z2_MSL.webp");
  }
}

@media (max-aspect-ratio: 82/100) {
  .aquarium-tank.is-crowded .aquarium-fish:not(:disabled) {
    width: calc(20% * var(--z, 1));
    height: calc(14% * var(--z, 1));
  }
}
.tool-count {
  background: #765024;
}
.reward-egg {
  position: absolute;
  z-index: 2;
  width: 74%;
  height: 90%;
  pointer-events: none;
}
.reward-egg::before,
.reward-egg::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid #e2ba7e;
  border-radius: 50% 50% 47% 47% / 60% 60% 40% 40%;
  background:
    radial-gradient(ellipse at 25% 35%, #dfa766 0 7%, transparent 8%),
    radial-gradient(ellipse at 75% 60%, #dfa766 0 8%, transparent 9%),
    linear-gradient(135deg, #fffef2, #f5d797);
  box-shadow: inset -9px -8px 14px #bb8f4c44;
}
.reward-egg::before {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 47%,
    80% 57%,
    65% 45%,
    50% 57%,
    35% 45%,
    20% 57%,
    0 47%
  );
  animation: egg-top 1.25s ease-in forwards;
}
.reward-egg::after {
  clip-path: polygon(
    0 47%,
    20% 57%,
    35% 45%,
    50% 57%,
    65% 45%,
    80% 57%,
    100% 47%,
    100% 100%,
    0 100%
  );
  animation: egg-bottom 1.25s ease-in forwards;
}
.fish-reward .reward-bubble img {
  animation: dino-hatch 1.1s ease-out both;
}
@keyframes egg-top {
  0%,
  35% {
    transform: rotate(-3deg);
    opacity: 1;
  }
  70% {
    transform: translate(20px, -32px) rotate(24deg);
    opacity: 1;
  }
  100% {
    transform: translate(40px, -42px) rotate(45deg);
    opacity: 0;
  }
}
@keyframes egg-bottom {
  0%,
  35% {
    transform: rotate(3deg);
    opacity: 1;
  }
  70% {
    transform: translate(-12px, 20px) rotate(-18deg);
    opacity: 1;
  }
  100% {
    transform: translate(-28px, 35px) rotate(-35deg);
    opacity: 0;
  }
}
@keyframes dino-hatch {
  0%,
  30% {
    opacity: 0;
    transform: scale(0.5);
  }
  80% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
html[data-reduced-motion="true"] .reward-egg {
  display: none;
}
html[data-reduced-motion="true"] .fish-reward .reward-bubble img {
  animation: none;
}
.btn-hint .tool-count {
  background: #765024;
}
#screen-menu .logo::after {
  opacity: 0.22 !important;
}
.fish-reward::backdrop {
  background: rgba(55, 38, 16, 0.68);
}
/* A real collectible album: paper pages, numbered slots and die-cut stickers. */
#btn-aquarium .mode-icon::before {
  content: "📒";
}
.aquarium-panel {
  width: min(1000px, 95%);
  max-height: calc(100% - 96px);
  padding: 12px 16px 16px;
  border: 4px solid #f9dc9f;
  border-radius: 27px;
  background: linear-gradient(145deg, #fff7df, #f5e3b9);
  box-shadow:
    0 8px 0 #a26d3c,
    0 20px 40px #3a260c88;
  overflow: hidden;
}
.album-subtitle {
  margin: 0 0 10px;
  color: #775435;
  text-align: center;
  font: 700 15px var(--f-ui);
}
.aquarium-progress {
  margin: 0 0 8px;
  box-shadow: none;
  background: #fff7df;
  border: 1px solid #e8cca0;
}
.sticker-album {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-content: start;
  gap: 14px;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  max-height: min(65vh, 590px);
  aspect-ratio: auto;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  border: 2px solid #d9b77f;
  border-radius: 17px;
  background:
    repeating-linear-gradient(0deg, transparent 0 32px, #e5ce9f55 33px 34px),
    linear-gradient(110deg, #fff9e8, #fff3d4);
  box-shadow: inset 0 2px 10px #b5905940;
}
.sticker {
  position: relative;
  min-width: 0;
  aspect-ratio: 0.95;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 14px;
  font: 700 16px var(--f-display);
}
.sticker.is-unlocked {
  border: 3px solid #fffefa;
  background: linear-gradient(145deg, #d6efad, #aedc81);
  color: #554124;
  box-shadow:
    0 3px 0 #cbb27f,
    0 6px 12px #7d583633;
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.sticker.is-unlocked:nth-child(3n + 2) {
  background: linear-gradient(145deg, #ffe5a0, #f7c779);
}
.sticker.is-unlocked:nth-child(3n) {
  background: linear-gradient(145deg, #c9eef2, #a5dada);
}
.sticker.is-unlocked:hover,
.sticker.is-unlocked.is-selected {
  transform: translateY(-4px) rotate(-2deg);
  box-shadow:
    0 5px 0 #cbb27f,
    0 10px 17px #7d583644;
}
.sticker.is-unlocked:focus-visible {
  outline: 3px solid #528b2d;
  outline-offset: 3px;
}
.sticker.is-locked {
  border: 2px dashed #cdb68b;
  background: #efdfbc88;
  color: #a78f68;
}
.sticker-number {
  position: absolute;
  left: 8px;
  top: 6px;
  font: 700 11px var(--f-ui);
  opacity: 0.75;
}
.sticker-art {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: grid;
  place-items: center;
  font: 700 43px var(--f-display);
}
.sticker-art img {
  width: 100%;
  height: 100%;
  max-height: 120px;
  object-fit: contain;
  filter: drop-shadow(2px 0 white) drop-shadow(-2px 0 white)
    drop-shadow(0 2px white) drop-shadow(0 4px 3px #4c5f3560);
}
.sticker-name {
  flex: none;
  padding: 2px 10px;
  border-radius: 99px;
  background: #fff9e3dd;
  line-height: 1.2;
}
.sticker.is-locked .sticker-name {
  background: transparent;
}
.fish-reward .reward-bubble {
  width: 190px;
  height: 190px;
  padding: 10px;
  border: 6px solid white;
  border-radius: 20px;
  background: linear-gradient(145deg, #d6efad, #aedc81);
  box-shadow:
    0 6px 0 #cfb47d,
    0 10px 20px #73582755;
  transform: rotate(-3deg);
}
.fish-reward .reward-bubble::before {
  display: none;
}
.fish-reward .reward-bubble img {
  width: 100%;
  height: 100%;
  filter: drop-shadow(2px 0 white) drop-shadow(-2px 0 white)
    drop-shadow(0 2px white) drop-shadow(0 4px 3px #4c5f3560);
}
@media (max-aspect-ratio: 82/100) {
  .aquarium-panel {
    width: 94%;
    max-height: calc(100% - 90px);
    padding: 9px;
    border-width: 3px;
  }
  .album-subtitle {
    font-size: 12px;
    margin-bottom: 6px;
  }
  .sticker-album {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    padding: 10px;
    max-height: min(68vh, 620px);
  }
  .sticker {
    font-size: 13px;
    padding: 6px;
  }
  .sticker-number {
    font-size: 10px;
  }
  .sticker-art {
    font-size: 34px;
  }
}
html[data-reduced-motion="true"] .sticker {
  transition: none;
}
@media (min-aspect-ratio: 82/100) {
  .sticker {
    aspect-ratio: 1.35;
  }
}
@media (max-aspect-ratio: 82/100) {
  .aquarium-top-title {
    font-size: clamp(10px, 3vw, 14px);
  }
}
.fish-reward .reward-bubble img {
  animation: sticker-pop 0.55s cubic-bezier(0.2, 0.8, 0.2, 1.2) both;
}
@keyframes sticker-pop {
  from {
    opacity: 0;
    transform: scale(0.6) rotate(8deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}
html[data-reduced-motion="true"] .fish-reward .reward-bubble img {
  animation: none;
}
.sticker-art {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 0;
  height: 0;
}
.sticker-art img {
  min-height: 0;
  max-height: 100%;
  max-width: 100%;
}
#debug-skip-level {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 1000;
  padding: 10px 14px;
  border: 2px solid #ffd760;
  border-radius: 12px;
  background: #4b301d;
  color: white;
  font: 700 14px var(--f-ui);
  box-shadow: 0 3px 10px #0006;
  cursor: pointer;
}
#debug-skip-level[hidden] {
  display: none;
}
#debug-skip-level:focus-visible {
  outline: 3px solid white;
  outline-offset: 3px;
}
/* Two soft counter-rotating rays celebrate the sticker without covering its artwork. */
.sticker-reward-stage {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  width: 190px;
  height: 190px;
  max-width: 48vw;
  max-height: 48vw;
  flex: none;
}
.sticker-reward-stage::before,
.sticker-reward-stage::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 155%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 187, 49, 0.52) 0deg 9deg,
    transparent 9deg 23deg
  );
  -webkit-mask-image: radial-gradient(
    circle,
    #000 0 30%,
    rgba(0, 0, 0, 0.75) 46%,
    transparent 72%
  );
  mask-image: radial-gradient(
    circle,
    #000 0 30%,
    rgba(0, 0, 0, 0.75) 46%,
    transparent 72%
  );
  animation: sticker-rays 22s linear infinite;
}
.sticker-reward-stage::after {
  width: 130%;
  opacity: 0.55;
  background: repeating-conic-gradient(
    from 8deg,
    rgba(255, 222, 119, 0.7) 0deg 7deg,
    transparent 7deg 26deg
  );
  animation-duration: 31s;
  animation-direction: reverse;
}
.fish-reward .reward-bubble {
  position: relative;
  z-index: 1;
}
.fish-reward h2,
.fish-reward .reward-name,
.fish-reward .btn {
  position: relative;
  z-index: 2;
}
@keyframes sticker-rays {
  to {
    transform: rotate(360deg);
  }
}
@media (max-height: 400px) {
  .sticker-reward-stage {
    width: 100px;
    height: 100px;
  }
}
html[data-reduced-motion="true"] .sticker-reward-stage::before,
html[data-reduced-motion="true"] .sticker-reward-stage::after,
html[data-calm="true"] .sticker-reward-stage::before,
html[data-calm="true"] .sticker-reward-stage::after {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-reduced-motion="false"]) .sticker-reward-stage::before,
  html:not([data-reduced-motion="false"]) .sticker-reward-stage::after {
    animation: none;
  }
}
/* A collectible packet opens over the album and sends the sticker to its slot. */
.packet-reveal[open] {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 20px;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  overflow: visible;
  color: #fff;
  text-align: center;
}
.packet-reveal::backdrop {
  background: rgba(45, 28, 11, 0.72);
  backdrop-filter: blur(3px);
}
.packet-title {
  position: relative;
  z-index: 3;
  margin: 0;
  color: #fff8df;
  font: 700 clamp(25px, 4vw, 38px) var(--f-display);
  text-shadow:
    0 3px 0 #744416,
    0 6px 12px #201200aa;
}
.packet-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(230px, 56vw);
  height: min(265px, 64vw);
  isolation: isolate;
}
.packet-stage::before,
.packet-stage::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 155%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: repeating-conic-gradient(
    #ffce54bb 0deg 10deg,
    transparent 10deg 24deg
  );
  mask-image: radial-gradient(circle, #000 0 32%, transparent 73%);
  opacity: 0;
  transition: opacity 0.3s;
}
.packet-stage::after {
  width: 125%;
  background: repeating-conic-gradient(
    #fff1a5dd 0deg 7deg,
    transparent 7deg 26deg
  );
}
.packet-stage.is-revealed::before {
  opacity: 1;
  animation: sticker-rays 18s linear infinite;
}
.packet-stage.is-revealed::after {
  opacity: 0.8;
  animation: sticker-rays 25s linear infinite reverse;
}
.sticker-packet {
  position: absolute;
  z-index: 2;
  inset: 0 7%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 4px solid #ffeaa2;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 65%, #a7dc63 0 29%, transparent 30%),
    linear-gradient(135deg, #328e55, #5cb348 50%, #2d804b);
  box-shadow:
    0 9px 0 #216037,
    0 18px 35px #160b0080,
    inset 0 0 0 4px #ffffff33;
  transform: rotate(-4deg);
  animation: packet-bob 1.6s ease-in-out infinite alternate;
}
.sticker-packet::before,
.sticker-packet::after {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  height: 8px;
  background: repeating-linear-gradient(
    90deg,
    #fff3b7aa 0 3px,
    transparent 3px 8px
  );
}
.sticker-packet::before {
  top: 8px;
}
.sticker-packet::after {
  bottom: 8px;
}
.packet-top {
  position: absolute;
  left: -4px;
  right: -4px;
  top: -5px;
  height: 22%;
  border: 4px solid #ffeaa2;
  border-bottom: 3px dashed #e4f49e;
  border-radius: 16px 16px 4px 4px;
  background: linear-gradient(120deg, #4aaa5a, #82cf68);
  transform-origin: left bottom;
}
.packet-label {
  z-index: 1;
  color: #fff5b7;
  font: 700 clamp(40px, 9vw, 59px)/1 var(--f-display);
  letter-spacing: 2px;
  text-shadow: 0 4px 0 #276b32;
}
.packet-badge {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 4px solid #fff5bf;
  border-radius: 50%;
  color: #805018;
  background: #ffd55a;
  font: 700 34px var(--f-display);
  box-shadow: 0 4px 0 #b67d28;
}
.sticker-packet.is-opening {
  animation: packet-shake 0.48s ease-in-out both;
}
.sticker-packet.is-opening .packet-top {
  animation: packet-tear 0.5s ease-in forwards;
}
.sticker-packet.is-gone {
  visibility: hidden;
}
.packet-card {
  position: absolute;
  z-index: 3;
  width: 85%;
  height: 76%;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 6px solid #fffefa;
  border-radius: 20px;
  background: linear-gradient(145deg, #d6efad, #aedc81);
  box-shadow:
    0 7px 0 #aa8750,
    0 16px 28px #1d12007a;
  opacity: 0;
  transform: translateY(55px) scale(0.5) rotate(-3deg);
}
.packet-card img {
  width: 100%;
  height: calc(100% - 28px);
  object-fit: contain;
  filter: drop-shadow(2px 0 white) drop-shadow(-2px 0 white)
    drop-shadow(0 2px white) drop-shadow(0 4px 3px #4c5f3560);
}
.packet-card span {
  color: #426b29;
  font: 700 23px/1 var(--f-display);
}
.is-revealed .packet-card {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(-3deg);
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1.25),
    opacity 0.25s;
}
.packet-skip {
  position: relative;
  z-index: 3;
  padding: 9px 18px;
  border: 2px solid #fff8;
  border-radius: 999px;
  background: #3e2b1dcf;
  color: white;
  font: 700 15px var(--f-ui);
  cursor: pointer;
}
.packet-skip:focus-visible {
  outline: 3px solid #ffe06e;
  outline-offset: 3px;
}
.sticker.just-collected {
  animation: sticker-land 0.55s cubic-bezier(0.2, 0.8, 0.2, 1.3);
}
@keyframes packet-bob {
  to {
    transform: rotate(2deg) translateY(-7px);
  }
}
@keyframes packet-shake {
  25% {
    transform: rotate(-9deg) scale(1.04);
  }
  65% {
    transform: rotate(9deg) scale(1.04);
  }
}
@keyframes packet-tear {
  to {
    transform: translate(12px, -65px) rotate(25deg);
    opacity: 0;
  }
}
@keyframes sticker-land {
  from {
    transform: scale(1.35);
    filter: brightness(1.35);
  }
  to {
    transform: scale(1);
    filter: brightness(1);
  }
}
html[data-reduced-motion="true"]
  :is(
    .sticker-packet,
    .packet-stage::before,
    .packet-stage::after,
    .sticker.just-collected
  ),
html[data-calm="true"]
  :is(
    .sticker-packet,
    .packet-stage::before,
    .packet-stage::after,
    .sticker.just-collected
  ) {
  animation: none !important;
}
html[data-reduced-motion="true"] .packet-card,
html[data-calm="true"] .packet-card {
  transition: none;
}
/* End of src/dino.css */


/* End of assets/index-4Q4Wu1uZ-part4.css */