/* ============ Bugdoku — welcome, level map, album, stamps ============ */

button.logo { border: 0; cursor: pointer; font: inherit; }
button.logo:active { transform: scale(.92) rotate(-8deg); }

body.tinted {
  background:
    radial-gradient(1200px 640px at 50% -10%, color-mix(in srgb, var(--tint) 62%, var(--bg)), transparent 72%),
    var(--bg);
}
:root[data-theme="dark"] body.tinted,
:root[data-theme="auto"] body.tinted { /* dark mode: keep the wash subtle */ }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] body.tinted { background: radial-gradient(1200px 640px at 50% -10%, color-mix(in srgb, var(--tint) 22%, var(--bg)), transparent 72%), var(--bg); }
}
:root[data-theme="dark"] body.tinted { background: radial-gradient(1200px 640px at 50% -10%, color-mix(in srgb, var(--tint) 22%, var(--bg)), transparent 72%), var(--bg); }

.screen { position: relative; z-index: 1; }

/* ================= WELCOME ================= */
.home {
  max-width: 520px; margin: 0 auto; min-height: 100dvh;
  padding: max(14px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 18px; justify-content: center;
}
.home-top { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 18px; display: flex; gap: 8px; z-index: 3; }

/* bugs crawling slowly across the screen */
.crawlers { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.crawlers span {
  position: absolute; top: var(--y); left: -3rem; font-size: 1.7rem; opacity: .75;
  animation: crawl var(--d) linear infinite; animation-delay: var(--delay);
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .25));
}
@keyframes crawl {
  from { transform: translateX(-3rem) scaleX(var(--flip, 1)) rotate(4deg); }
  50%  { transform: translateX(50vw) scaleX(var(--flip, 1)) rotate(-4deg); }
  to   { transform: translateX(calc(100vw + 3rem)) scaleX(var(--flip, 1)) rotate(4deg); }
}

.wordmark { text-align: center; padding-top: 34px; position: relative; z-index: 1; }
.wm-logo {
  width: 92px; height: 92px; margin: 0 auto 4px; display: grid; place-items: center; font-size: 3.4rem;
  background: var(--card); border-radius: 30px; box-shadow: var(--shadow), 0 8px 0 color-mix(in srgb, var(--ink) 14%, transparent);
  animation: wm-float 3.4s ease-in-out infinite; cursor: pointer;
}
.wm-logo.hop { animation: hop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes wm-float { 50% { transform: translateY(-8px) rotate(-3deg); } }
@keyframes hop { 40% { transform: translateY(-30px) rotate(14deg) scale(1.1); } }
h1.wm { margin: 6px 0 0; font-size: clamp(3rem, 15vw, 4.6rem); line-height: 1; letter-spacing: -.02em; font-weight: 900; display: flex; justify-content: center; }
h1.wm span {
  color: var(--c); display: inline-block;
  -webkit-text-stroke: 7px var(--line); paint-order: stroke fill;
  text-shadow: 0 5px 0 color-mix(in srgb, var(--line) 80%, transparent);
  animation: letter-in .7s cubic-bezier(.3, 1.7, .5, 1) both, letter-bob 3s ease-in-out infinite;
  animation-delay: calc(var(--i) * 70ms), calc(.9s + var(--i) * 140ms);
}
:root[data-theme="dark"] h1.wm span { -webkit-text-stroke-color: #0b120d; }
@keyframes letter-in { from { transform: translateY(-60px) rotate(-25deg) scale(.4); opacity: 0; } }
@keyframes letter-bob { 50% { transform: translateY(-5px) rotate(2deg); } }
.wm-sub { margin: 10px 0 0; font-weight: 800; color: var(--ink-soft); letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; }

/* ---- stamp shelf ---- */
.shelf {
  position: relative; z-index: 1; width: 100%; text-align: left; cursor: pointer; border: 0;
  background: var(--card); border-radius: 22px; padding: 12px 14px 14px;
  box-shadow: var(--shadow), inset 0 0 0 2px color-mix(in srgb, var(--ink) 8%, transparent);
  transition: transform .15s;
}
.shelf:active { transform: scale(.985); }
.shelf-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; margin-bottom: 8px; }
.shelf-head b { background: color-mix(in srgb, var(--ink) 9%, transparent); padding: 2px 10px; border-radius: 99px; font-size: .85rem; }
.shelf-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.shelf-slot {
  display: grid; place-items: center; padding: 4px; border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .12);
}

/* ---- chunky colourful menu buttons ---- */
.menu { position: relative; z-index: 1; display: grid; gap: 14px; }
.menu-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.big-btn {
  --bc: #ff6b4a; --bd: #bf3d22;
  position: relative; overflow: hidden; width: 100%;
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 14px 14px; border: 0; border-radius: 24px; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bc) 78%, #fff) 0%, var(--bc) 55%);
  box-shadow:
    0 7px 0 var(--bd),
    0 16px 22px -8px color-mix(in srgb, var(--bd) 80%, transparent),
    inset 0 2px 0 rgba(255, 255, 255, .45);
  transition: transform .1s, box-shadow .1s, filter .2s;
  animation: btn-in .5s cubic-bezier(.3, 1.5, .5, 1) both;
}
.big-btn::after { /* glossy sweep */
  content: ""; position: absolute; top: -40%; left: -30%; width: 40%; height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: rotate(18deg) translateX(-160%); transition: transform .6s;
}
.big-btn:hover::after { transform: rotate(18deg) translateX(520%); }
.big-btn:hover { filter: brightness(1.05); }
.big-btn:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--bd), 0 6px 10px -6px var(--bd), inset 0 2px 0 rgba(255, 255, 255, .35); }
@keyframes btn-in { from { transform: translateY(40px) scale(.9); opacity: 0; } }
.menu > .big-btn { animation-delay: .35s; }
.menu-row:nth-of-type(1) .big-btn:nth-child(1) { animation-delay: .45s; }
.menu-row:nth-of-type(1) .big-btn:nth-child(2) { animation-delay: .52s; }
.menu-row:nth-of-type(2) .big-btn:nth-child(1) { animation-delay: .6s; }
.menu-row:nth-of-type(2) .big-btn:nth-child(2) { animation-delay: .67s; }

.bb-icon {
  flex: none; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font-size: 1.5rem;
  background: rgba(255, 255, 255, .26); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14);
  text-shadow: 0 2px 2px rgba(0, 0, 0, .25);
}
.bb-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.bb-text b { font-size: 1.25rem; font-weight: 900; text-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
.bb-text small { font-size: .74rem; font-weight: 700; opacity: .92; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-go { margin-left: auto; font-size: 2rem; font-weight: 900; opacity: .9; text-shadow: 0 2px 0 rgba(0, 0, 0, .2); }

.big-btn.play { --bc: #ff7043; --bd: #c24a21; padding: 18px 16px; }
.big-btn.play .bb-icon { width: 58px; height: 58px; font-size: 1.9rem; border-radius: 19px; }
.big-btn.play .bb-text b { font-size: 1.7rem; }
.big-btn.play { animation: btn-in .5s cubic-bezier(.3, 1.5, .5, 1) .3s both, play-pulse 2.6s ease-in-out 1.2s infinite; }
@keyframes play-pulse { 50% { filter: brightness(1.08); transform: scale(1.015); } }
.big-btn.daily { --bc: #3d9be9; --bd: #1f67ac; }
.big-btn.free { --bc: #9a63e8; --bd: #6234ad; }
.big-btn.settings { --bc: #22b39a; --bd: #127a67; }
.big-btn.album { --bc: #b97a3e; --bd: #7a4519; }
.big-btn.album::before { /* book spine */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .22) 0 10px, rgba(0, 0, 0, .1) 10px 12px);
}
.big-btn.album { padding-left: 24px; }
.menu-row .bb-icon { width: 40px; height: 40px; font-size: 1.3rem; border-radius: 13px; }
.menu-row .bb-text b { font-size: 1.05rem; }
.menu-row .big-btn { padding: 12px 12px; gap: 9px; }
.menu-row .big-btn.album { padding-left: 22px; }

@media (max-width: 380px) { .menu-row .bb-text small { display: none; } }

/* ================= SUB SCREENS (levels / album) ================= */
.subscreen {
  max-width: 560px; margin: 0 auto; min-height: 100dvh;
  padding: max(14px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 14px;
}
.sub-top { display: flex; align-items: center; gap: 12px; }
.sub-top h2 { margin: 0; font-size: 1.5rem; font-weight: 900; flex: 1; }
.icon-btn.back { font-size: 1.3rem; font-weight: 900; }

/* ---- level map ---- */
.worlds { display: grid; gap: 14px; }
.world {
  background: var(--card); border-radius: 24px; padding: 14px; position: relative; overflow: hidden;
  box-shadow: var(--shadow), inset 0 0 0 2px color-mix(in srgb, var(--s1) 22%, transparent);
}
.world::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 7px; background: var(--s1); }
.world header { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
.w-stamp { flex: none; }
.w-title { flex: 1; min-width: 0; }
.w-title small { font-weight: 800; color: var(--s1); letter-spacing: .08em; font-size: .7rem; }
.w-title h3 { margin: 0; font-size: 1.15rem; font-weight: 900; line-height: 1.1; }
.w-title em { font-style: normal; font-size: .75rem; font-weight: 700; color: var(--ink-soft); }
.w-bug { font-size: 2rem; opacity: .9; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .25)); }
.world.w-locked { opacity: .55; filter: saturate(.5); }
.nodes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.node {
  aspect-ratio: 1; border: 0; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 900; line-height: 1.05; cursor: pointer; position: relative;
  transition: transform .12s;
}
.node b { font-size: 1.15rem; }
.node small { font-size: .6rem; font-weight: 800; opacity: .85; }
.node:active:not(:disabled) { transform: scale(.9); }
.node.cleared { background: linear-gradient(180deg, color-mix(in srgb, var(--s1) 70%, #fff), var(--s1)); color: #fff; box-shadow: 0 4px 0 color-mix(in srgb, var(--s1) 62%, #000), inset 0 2px 0 rgba(255, 255, 255, .4); text-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
.node.current { background: var(--card); color: var(--ink); box-shadow: 0 0 0 4px var(--s1), 0 5px 0 4px color-mix(in srgb, var(--s1) 60%, #000); animation: node-pulse 1.6s ease-in-out infinite; }
.node-bug { font-size: 1.5rem; }
.node.locked { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink-soft); cursor: default; box-shadow: inset 0 3px 5px rgba(0, 0, 0, .12); }
.node .lock { font-size: 1rem; opacity: .6; }
@keyframes node-pulse { 50% { transform: scale(1.08); } }

/* ================= ALBUM ================= */
.album { flex: 1; display: flex; min-width: 0; }
.album-cover {
  flex: 1; min-width: 0; position: relative; border-radius: 26px; padding: 16px 16px 14px 34px; display: flex; flex-direction: column; gap: 12px;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .13), transparent 40%),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 5px),
    linear-gradient(145deg, #a8693a, #6f3f1b 70%);
  box-shadow: 0 22px 40px -16px rgba(60, 30, 5, .7), inset 0 0 0 3px rgba(255, 220, 170, .18), inset 0 -8px 20px rgba(0, 0, 0, .25);
}
.album-cover::before { /* stitched border */
  content: ""; position: absolute; inset: 8px; border: 2px dashed rgba(255, 225, 175, .5); border-radius: 20px; pointer-events: none;
}
.album-rings { position: absolute; left: 6px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-evenly; z-index: 3; }
.album-rings i {
  display: block; width: 36px; height: 15px; border-radius: 99px; margin-left: -2px;
  background: linear-gradient(180deg, #f6f1e6, #a9a395 60%, #6d685d);
  box-shadow: 0 3px 4px rgba(0, 0, 0, .45);
}
.album-page {
  flex: 1; min-width: 0; position: relative; border-radius: 10px 18px 18px 10px; padding: 14px 12px 12px; transform-origin: left center;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .14), transparent 6%),
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(120, 90, 50, .09) 27px 28px),
    #fbf3df;
  color: #3a2e22;
  box-shadow: inset 0 0 30px rgba(150, 110, 50, .18), 0 3px 8px rgba(0, 0, 0, .3);
  backface-visibility: hidden;
}
.album-page.turn-fwd { animation: turn-fwd .55s cubic-bezier(.3, .8, .3, 1); }
.album-page.turn-back { animation: turn-back .55s cubic-bezier(.3, .8, .3, 1); }
@keyframes turn-fwd { from { transform: perspective(1200px) rotateY(-80deg); opacity: .2; } }
@keyframes turn-back { from { transform: perspective(1200px) rotateY(80deg); opacity: .2; } }
.page-no { text-align: center; font-family: "Bradley Hand", "Segoe Script", "Marker Felt", cursive; color: #8a7455; font-size: .95rem; margin-bottom: 4px; }
.slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; }

.slot {
  position: relative; border: 0; background: none; padding: 14px 8px 8px; cursor: pointer; text-align: center; color: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 2px; border-radius: 6px;
  transform: rotate(var(--tilt, 0deg)); transition: transform .2s;
  --cc: #d6a35f;
}
.slot:hover { transform: rotate(0) scale(1.03); }
.slot::before { /* photo mount with four corner triangles */
  content: ""; position: absolute; inset: 0; border-radius: 4px; pointer-events: none;
  background:
    linear-gradient(135deg, var(--cc) 50%, transparent 50%) top left / 24px 24px no-repeat,
    linear-gradient(225deg, var(--cc) 50%, transparent 50%) top right / 24px 24px no-repeat,
    linear-gradient(45deg, var(--cc) 50%, transparent 50%) bottom left / 24px 24px no-repeat,
    linear-gradient(315deg, var(--cc) 50%, transparent 50%) bottom right / 24px 24px no-repeat,
    color-mix(in srgb, #fff 55%, transparent);
  box-shadow: inset 0 0 0 1px rgba(120, 90, 50, .22);
}
.slot > * { position: relative; }
.slot .cap { font-family: "Bradley Hand", "Segoe Script", "Marker Felt", cursive; font-weight: 700; font-size: 1rem; line-height: 1.1; margin-top: 6px; }
.slot small { font-size: .68rem; font-weight: 700; color: #8a7455; }
.slot.empty .cap { color: #9d8c72; }

.album-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.album-nav .icon-btn { font-size: 1.5rem; font-weight: 900; line-height: 1; }
.album-nav .icon-btn:disabled { opacity: .35; cursor: default; }
.dots { display: flex; gap: 8px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 235, 200, .35); }
.dots i.on { background: #ffe9c2; box-shadow: 0 0 0 3px rgba(255, 233, 194, .3); }

/* ================= STAMPS (3D, perforated) ================= */
.stamp {
  --w: 96px; --tx: 0; --ty: 0;
  width: var(--w); aspect-ratio: 4 / 5; position: relative; perspective: 600px;
  filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .28));
}
.stamp.xs { --w: 38px; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .3)); }
.stamp.md { --w: min(34vw, 150px, 12.5dvh); }
.stamp.xl { --w: min(58vw, 230px, 30dvh); filter: drop-shadow(0 16px 14px rgba(0, 0, 0, .35)); }
.stamp-3d {
  width: 100%; height: 100%; transform-style: preserve-3d;
  transform: rotateX(calc(var(--ty) * -16deg)) rotateY(calc(var(--tx) * 16deg));
  transition: transform .25s cubic-bezier(.2, .8, .3, 1);
}
.stamp.tilting .stamp-3d { transition: transform .06s linear; }
.stamp.earned.md .stamp-3d, .stamp.earned.xl .stamp-3d { animation: stamp-float 4s ease-in-out infinite; }
.stamp.tilting .stamp-3d { animation: none; }
@keyframes stamp-float { 50% { transform: translateY(-4px) rotateX(3deg) rotateY(-4deg); } }

.stamp-face {
  --p: 7px; --hole: 3.4px;
  width: 100%; height: 100%; padding: var(--p); box-sizing: border-box; display: flex; flex-direction: column; background: #fffdf4;
  /* perforated edge: solid inner rectangle ∪ tile pattern that has holes at its corners */
  -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle at var(--p) var(--p), transparent calc(var(--hole) - .5px), #000 var(--hole)) calc(var(--p) * -1) calc(var(--p) * -1) / calc(var(--p) * 2) calc(var(--p) * 2) round;
  mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle at var(--p) var(--p), transparent calc(var(--hole) - .5px), #000 var(--hole)) calc(var(--p) * -1) calc(var(--p) * -1) / calc(var(--p) * 2) calc(var(--p) * 2) round;
}
.stamp.xs .stamp-face { --p: 3px; --hole: 1.5px; }
.stamp.xl .stamp-face { --p: 11px; --hole: 5.4px; }

.stamp-pic {
  position: relative; flex: 1; border-radius: 4px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 22%, var(--s2), var(--s1) 85%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55), inset 0 0 0 3px var(--s1);
}
.stamp-rays {
  position: absolute; inset: -50%; opacity: .32;
  background: repeating-conic-gradient(from 0deg at 50% 55%, rgba(255, 255, 255, .55) 0 8deg, transparent 8deg 20deg);
  animation: rays 24s linear infinite;
}
@keyframes rays { to { transform: rotate(360deg); } }
.stamp-bug {
  position: relative; z-index: 2; font-size: calc(var(--w) * .5); line-height: 1;
  filter: drop-shadow(0 calc(var(--w) * .05) calc(var(--w) * .03) rgba(0, 0, 0, .4));
  transform: translate(calc(var(--tx) * var(--w) * .05), calc(var(--ty) * var(--w) * .04)) scale(1.04);
  transition: transform .2s;
}
.stamp-shadow { /* contact shadow on the "ground" under the bug */
  position: absolute; z-index: 1; left: 50%; bottom: 20%; width: 54%; height: 9%; transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0, 0, 0, .38), transparent 70%);
}
.shine {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .95) calc(46% + var(--tx) * 28%), transparent calc(62% + var(--tx) * 28%));
  opacity: .8;
}
.stamp-cap {
  flex: none; display: flex; align-items: baseline; justify-content: center; gap: 4px; padding-top: calc(var(--w) * .035);
  color: var(--s1); font-weight: 900; line-height: 1;
}
.stamp-cap span { font-size: calc(var(--w) * .095); letter-spacing: .12em; }
.stamp-cap b { font-size: calc(var(--w) * .17); }
.stamp.xs .stamp-cap { display: none; }

/* locked (not earned yet): a ghost of the stamp */
.stamp.locked { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .15)); opacity: .85; }
.stamp.locked .stamp-face { background: #e8dfc9; }
.stamp.locked .stamp-pic { background: #d8ccb2; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4), inset 0 0 0 3px #b9aa8a; }
.stamp.locked .stamp-bug { filter: brightness(0) opacity(.2); }
.stamp.locked .stamp-rays, .stamp.locked .shine, .stamp.locked .stamp-shadow { display: none; }
.stamp.locked .stamp-cap { color: #a39578; }
.stamp.locked.md .stamp-pic::after { content: "?"; position: absolute; font-size: calc(var(--w) * .26); font-weight: 900; color: rgba(90, 70, 40, .35); z-index: 4; }
.stamp.locked.md .stamp-bug { display: none; }

/* ---- stamp dialogs ---- */
.stamp-dlg { text-align: center; }
.stamp-dlg .kicker { margin: 0 0 4px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; color: var(--accent); }
.stamp-hero { display: grid; place-items: center; padding: 14px 0 10px; }
#dlg-stamp[open] .stamp-hero .stamp { animation: stamp-reveal 1.1s cubic-bezier(.2, 1.1, .3, 1) both; }
@keyframes stamp-reveal {
  0% { transform: scale(.2) rotateY(900deg); opacity: 0; }
  70% { transform: scale(1.12) rotateY(-12deg); opacity: 1; }
  100% { transform: scale(1) rotateY(0); }
}
dialog .actions { display: grid; gap: 0; }
dialog .link { display: block; margin-left: auto; margin-right: auto; }

/* sticky headers on long screens */
.sub-top {
  position: sticky; top: 0; z-index: 6; padding: max(6px, env(safe-area-inset-top)) 0 8px; margin-top: calc(max(6px, env(safe-area-inset-top)) * -1);
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px);
}


/* ---- SVG bug sizing on the new screens ---- */
.wm-logo .bug-svg { width: 1em; height: 1em; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .3)); }
.crawlers span { display: block; width: 2rem; height: 2rem; font-size: 2rem; }
.crawlers span .bug-svg { transform: rotate(90deg); filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .3)); } /* top-down bugs walk "forward" */
.crawlers span.side .bug-svg { transform: none; }
.crawlers span.side { --flip: 1; }
.node-bug { display: block; width: 1.6rem; height: 1.6rem; font-size: 1.6rem; }
.node-bug .bug-svg { width: 1em; height: 1em; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .3)); }
.w-bug { display: block; width: 2.3rem; height: 2.3rem; font-size: 2.3rem; }
.w-bug .bug-svg { filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .3)); }
.stamp-bug .bug-svg { width: 1.18em; height: 1.18em; }
.stamp-bug { font-size: calc(var(--w) * .56); display: grid; place-items: center; }
.stamp.xs .stamp-bug .bug-svg { width: 1.3em; height: 1.3em; }

/* ================= TUTORIAL: spotlight + speech bubble ================= */
.tut-dim { position: fixed; inset: 0; z-index: 30; background: rgba(22, 13, 5, .6); animation: tut-fade .3s ease-out; }
@keyframes tut-fade { from { opacity: 0; } }
.board-wrap.tut-lift { z-index: 35; }
.board.tutoring .cell:not(.tut-hi):not(.tut-line) { filter: brightness(.58) saturate(.65); transition: filter .3s; }
.board.tutoring .cell.tut-line { filter: brightness(.95); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); }
.board.tutoring .cell.tut-hi { z-index: 3; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px var(--accent); animation: tut-pulse 1.1s ease-in-out infinite; }
@keyframes tut-pulse { 50% { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 9px var(--accent); transform: scale(1.06); } }

.tut-bubble {
  position: fixed; z-index: 60; display: flex; gap: 10px; align-items: flex-start; max-width: 330px;
  padding: 12px 14px 10px; border-radius: 22px; background: var(--card); color: var(--ink);
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .6), 0 0 0 3px var(--accent);
}
.tut-bubble[hidden] { display: none; }
.tut-bubble.pop { animation: bubble-pop .38s cubic-bezier(.3, 1.5, .5, 1); }
.tut-bubble.shake { animation: bubble-shake .35s; }
@keyframes bubble-pop { from { transform: scale(.85) translateY(10px); opacity: 0; } }
@keyframes bubble-shake { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
.tut-avatar {
  flex: none; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font-size: 2.1rem;
  background: color-mix(in srgb, var(--accent) 14%, var(--card)); animation: tut-wave 2.6s ease-in-out infinite;
}
@keyframes tut-wave { 0%, 80%, 100% { transform: rotate(0); } 86% { transform: rotate(-14deg); } 93% { transform: rotate(12deg); } }
.tut-avatar .bug-svg { width: 1em; height: 1em; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .3)); }
.tut-body { flex: 1; min-width: 0; }
.tut-text { margin: 2px 0 9px; font-size: .94rem; line-height: 1.4; font-weight: 600; }
.tut-text b { font-weight: 900; color: var(--accent); }
.tut-foot { display: flex; align-items: center; gap: 10px; }
.tut-count { font-weight: 900; font-size: .8rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.tut-skip { margin-left: auto; border: 0; background: none; color: var(--ink-soft); font-weight: 700; font-size: .76rem; text-decoration: underline; cursor: pointer; padding: 4px; }
.tut-next { width: auto; margin: 0; padding: 7px 16px; font-size: .9rem; border-radius: 12px; }
.tut-next[hidden] { display: none; }
.tut-tail { position: absolute; left: var(--tail-x, 50%); top: -10px; width: 18px; height: 18px; background: var(--card); transform: translateX(-50%) rotate(45deg); border-left: 3px solid var(--accent); border-top: 3px solid var(--accent); border-radius: 4px 0 0 0; }
.tut-bubble.above .tut-tail { top: auto; bottom: -10px; border: 0; border-right: 3px solid var(--accent); border-bottom: 3px solid var(--accent); border-radius: 0 0 4px 0; }
.tut-bubble.no-tail .tut-tail { display: none; }

/* ================= FREE BUG (given) ================= */
.cell.given { cursor: default; box-shadow: inset 0 0 0 3px #ffc933, inset 0 0 0 5px rgba(42, 26, 16, .5); }
.given-lock { position: absolute; right: 5%; top: 4%; width: 28%; height: 28%; z-index: 2; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45)); }
.given-lock svg { display: block; width: 100%; height: 100%; }
.cell.nudge { animation: cell-nudge .4s; }
@keyframes cell-nudge { 25% { transform: translateX(-6%); } 75% { transform: translateX(6%); } }

/* ================= small controls ================= */
.btn-sm { border: 0; border-radius: 12px; padding: 7px 14px; font-weight: 800; background: color-mix(in srgb, var(--ink) 12%, transparent); color: var(--ink); }
.btn-sm:active { transform: scale(.95); }

.board.tutoring.tut-plain .cell { filter: none; }
.board.tutoring.tut-many .cell.tut-hi { animation: none; box-shadow: inset 0 0 0 3px #fff; }

/* ================= SMART HINTS: amber rings + bubble, board stays playable ================= */
.cell.hint-hi { z-index: 3; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px #f0a000; animation: hint-ring 1.1s ease-in-out infinite; }
.cell.hint-line { box-shadow: inset 0 0 0 3px rgba(240, 160, 0, .75); }
.board.hint-many .cell.hint-hi { animation: none; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px #f0a000; }
@keyframes hint-ring { 50% { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 9px #f0a000; transform: scale(1.05); } }
.tut-bubble.hint { --accent: #f0a000; }
.tut-bubble.hint .tut-text b { color: #a85f00; }
:root[data-theme="dark"] .tut-bubble.hint .tut-text b { color: #ffc34d; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .tut-bubble.hint .tut-text b { color: #ffc34d; } }
.tut-bubble.hint .tut-next { color: #2a1a10; }

/* ================= LEAVES (lives) in the game ================= */
.lives-chip { gap: 4px; padding-right: 12px; }
.lives { display: inline-flex; gap: 3px; }
.leaf-slot { position: relative; width: 27px; height: 27px; display: grid; place-items: center; transform-origin: 15% 90%; }
.leaf-svg { width: 100%; height: 100%; overflow: visible; display: block; filter: drop-shadow(0 1.5px 1px rgba(0, 0, 0, .25)); }
.leaf-slot.ghost { color: color-mix(in srgb, var(--ink) 38%, transparent); }
.leaf-svg.ghost { filter: none; }
.seed-mini { display: inline-flex; align-items: center; gap: 3px; margin-left: 5px; padding-left: 9px; border-left: 2px solid color-mix(in srgb, var(--ink) 16%, transparent); }
.seed-mini-ico .seed-svg { width: 17px; height: 17px; display: block; }
.seed-mini b { font-size: .85rem; }
.seed-svg { display: block; overflow: visible; }

/* a caterpillar nibbles the leaf: bites appear one by one, then the rest drops away */
.bite { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.leaf-slot.eating .bite { animation: bite-in .2s ease-out forwards; animation-delay: calc(var(--k) * .2s + .3s); }
@keyframes bite-in { to { transform: scale(1); } }
.leaf-slot.eating .leaf-svg { animation: leaf-wobble .22s ease-in-out 5, leaf-drop .55s 1.15s ease-in forwards; }
@keyframes leaf-wobble { 50% { transform: rotate(-7deg) scale(.97); } }
@keyframes leaf-drop { to { transform: translateY(30px) rotate(45deg) scale(.7); opacity: 0; } }
.muncher { position: absolute; width: 22px; height: 22px; right: -5px; top: -7px; z-index: 2; pointer-events: none; animation: munch 1.5s ease-in-out forwards; }
.muncher .bug-svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .35)); }
@keyframes munch {
  0% { transform: translate(14px, -10px) scale(.4) rotate(25deg); opacity: 0; }
  14% { transform: translate(5px, -1px) scale(1) rotate(-10deg); opacity: 1; }
  34% { transform: translate(-4px, 5px) scale(1.1) rotate(12deg); }
  54% { transform: translate(-9px, 9px) scale(1) rotate(-12deg); }
  78% { transform: translate(-12px, 13px) scale(1.05) rotate(8deg); opacity: 1; }
  100% { transform: translate(-16px, 22px) scale(.7) rotate(20deg); opacity: 0; }
}
.leaf-slot.growing { animation: leaf-grow .7s cubic-bezier(.3, 1.7, .5, 1) both; }
@keyframes leaf-grow { from { transform: scale(0) rotate(-50deg); opacity: 0; } }

/* the wrong bug you tried shakes off the square */
.cell.wrong { animation: wrong-flash .9s ease-out; }
@keyframes wrong-flash { 0%, 25% { box-shadow: inset 0 0 0 100px rgba(224, 72, 60, .6); } 100% { box-shadow: inset 0 0 0 100px rgba(224, 72, 60, 0); } }
.ghost-bug { position: absolute; inset: 6%; z-index: 4; display: grid; place-items: center; pointer-events: none; animation: ghost-shake 1s forwards; }
.ghost-bug .bug-svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .35)) saturate(1.2); }
@keyframes ghost-shake {
  0% { transform: scale(1.5); opacity: 0; }
  14% { transform: scale(1); opacity: 1; }
  30% { transform: translateX(-10%) rotate(-8deg); }
  44% { transform: translateX(10%) rotate(8deg); }
  58% { transform: translateX(-7%) rotate(-5deg); opacity: 1; }
  100% { transform: scale(.3) rotate(30deg); opacity: 0; }
}

/* ================= DAILY NET + SEEDS (welcome page) ================= */
.net-row { position: relative; z-index: 1; display: flex; gap: 10px; align-items: stretch; }
.net-btn {
  position: relative; flex: 1; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  padding: 10px 14px; border: 0; border-radius: 22px; color: #fff; min-width: 0;
  background: linear-gradient(180deg, #96e072, #4cae4f 62%);
  box-shadow: 0 6px 0 #2a7a30, 0 14px 20px -8px rgba(30, 100, 40, .6), inset 0 2px 0 rgba(255, 255, 255, .45);
  transition: transform .1s, box-shadow .1s, filter .2s;
  animation: btn-in .5s cubic-bezier(.3, 1.5, .5, 1) .15s both;
}
.net-btn:hover { filter: brightness(1.05); }
.net-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #2a7a30, 0 6px 10px -6px #2a7a30, inset 0 2px 0 rgba(255, 255, 255, .35); }
.net-btn.claimed { background: linear-gradient(180deg, #bfd1b6, #98ae8d); box-shadow: 0 6px 0 #6f8266, 0 12px 18px -8px rgba(60, 80, 50, .5), inset 0 2px 0 rgba(255, 255, 255, .45); }
.net-btn:not(.claimed) .net-ico { animation: net-idle 3s ease-in-out infinite; }
@keyframes net-idle { 0%, 75%, 100% { transform: rotate(0); } 82% { transform: rotate(-9deg); } 90% { transform: rotate(7deg); } }
.net-ico { flex: none; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: rgba(255, 255, 255, .3); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .13); }
.net-svg { width: 34px; height: 34px; display: block; overflow: visible; transform-origin: 15% 90%; }
.net-ico.swing .net-svg { animation: net-swing .8s ease-in-out; }
@keyframes net-swing { 30% { transform: rotate(-38deg); } 62% { transform: rotate(26deg); } 100% { transform: rotate(0); } }
.net-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.net-text b { font-size: 1.15rem; font-weight: 900; text-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
.net-text small { font-size: .74rem; font-weight: 700; opacity: .95; margin-top: 2px; }
.net-badge { margin-left: auto; flex: none; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; font-weight: 900; font-size: .85rem; background: #ff5a3c; color: #fff; box-shadow: 0 0 0 3px #fff; animation: badge-pulse 1.6s ease-in-out infinite; }
.net-badge[hidden] { display: none; }
@keyframes badge-pulse { 50% { transform: scale(1.18); } }
.seed-pill { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 6px 14px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow), inset 0 0 0 2px color-mix(in srgb, var(--ink) 8%, transparent); }
.seed-pill-ico .seed-svg { width: 28px; height: 28px; }
.seed-pill b { font-size: 1.15rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.seed-pill.bump { animation: pill-bump .55s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes pill-bump { 40% { transform: scale(1.25) rotate(-5deg); } }
.fly-seed { position: fixed; width: 34px; height: 34px; z-index: 200; pointer-events: none; }
.fly-seed .seed-svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .35)); }

/* ================= OUT OF LEAVES + PLANT A SEED ================= */
.over-dlg { text-align: center; }
.over-stage { position: relative; height: 214px; display: grid; place-items: center; align-content: center; gap: 4px; overflow: hidden; }
.pile { display: flex; gap: 8px; justify-content: center; align-items: flex-end; }
.pile-leaf { width: 62px; height: 62px; color: color-mix(in srgb, var(--ink) 42%, transparent); }
.pile-leaf:nth-child(1) { transform: rotate(-14deg); }
.pile-leaf:nth-child(2) { transform: translateY(-8px); }
.pile-leaf:nth-child(3) { transform: rotate(14deg); }
.pile-leaf .leaf-svg { filter: none; }
.pile-seeds { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 900; font-size: 1.25rem; }
.pile-seeds .seed-svg { width: 34px; height: 34px; }
.over-hint { margin: 10px 0 0; font-size: .86rem; line-height: 1.4; color: var(--ink-soft); font-weight: 600; }
.over-hint b { color: var(--ink); }
.win-seed { display: flex; gap: 8px; align-items: center; justify-content: center; margin: -4px 0 10px; font-weight: 800; color: #2f8f3a; }
.win-seed .seed-svg { width: 24px; height: 24px; }

.revive { position: relative; width: 220px; height: 214px; }
.rv-soil { position: absolute; left: 50%; bottom: 4px; width: 130px; height: 38px; transform: translateX(-50%); border-radius: 50% 50% 46% 46%; background: radial-gradient(ellipse at 50% 15%, #9a6a3e, #4e2f18); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25); }
.rv-seed { position: absolute; left: 50%; top: -10px; width: 34px; height: 34px; margin-left: -17px; opacity: 0; }
.rv-seed .seed-svg { width: 100%; height: 100%; }
.revive.go .rv-seed { animation: seed-drop 1s cubic-bezier(.45, 0, .8, .65) forwards; }
@keyframes seed-drop {
  0% { transform: translateY(0) rotate(-25deg); opacity: 0; }
  10% { opacity: 1; }
  66% { transform: translateY(150px) rotate(14deg); opacity: 1; }
  78% { transform: translateY(152px) rotate(14deg) scaleY(.8); opacity: 1; }
  100% { transform: translateY(160px) scale(.45); opacity: 0; }
}
.rv-plant { position: absolute; left: 50%; bottom: 36px; width: 0; height: 0; }
.rv-stem { position: absolute; left: -4px; bottom: 0; width: 8px; height: 0; border-radius: 4px 4px 2px 2px; background: linear-gradient(90deg, #2f8f3a, #7ad65c 60%, #3f9f45); box-shadow: 0 0 0 1.5px #1f4d24; }
.revive.go .rv-stem { animation: stem-grow .65s 1.05s ease-out forwards; }
@keyframes stem-grow { to { height: 74px; } }
.rv-leaf { position: absolute; width: 64px; height: 64px; opacity: 0; }
.rv-leaf .leaf-svg { filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .3)); }
.rv-leaf.l1 { left: -54px; bottom: 68px; transform-origin: 100% 92%; }
.rv-leaf.l2 { left: 0; bottom: 70px; transform-origin: 8% 92%; }
.rv-leaf.l3 { left: -24px; bottom: 86px; transform-origin: 12% 90%; }
.revive.go .rv-leaf.l1 { animation: unfurl-l .65s 1.55s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.revive.go .rv-leaf.l2 { animation: unfurl-r .65s 1.75s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.revive.go .rv-leaf.l3 { animation: unfurl-t .65s 1.95s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes unfurl-l { from { transform: scaleX(-1) scale(0) rotate(-60deg); opacity: 0; } to { transform: scaleX(-1) scale(1) rotate(24deg); opacity: 1; } }
@keyframes unfurl-r { from { transform: scale(0) rotate(-60deg); opacity: 0; } to { transform: scale(1) rotate(24deg); opacity: 1; } }
@keyframes unfurl-t { from { transform: scale(0) rotate(-90deg); opacity: 0; } to { transform: scale(.95) rotate(-45deg); opacity: 1; } }

/* ================= HINT WALLET ================= */
/* the bubble above the Hint button: how many hints you have left */
.toolbar { margin-top: 20px; }
.tool { position: relative; }
.hint-badge {
  position: absolute; top: -24px; left: 50%; transform: translateX(-50%); z-index: 2; pointer-events: none;
  min-width: 27px; height: 24px; padding: 0 8px; border-radius: 99px; display: grid; place-items: center;
  font-size: .85rem; font-weight: 900; font-style: normal; font-variant-numeric: tabular-nums; line-height: 1;
  background: #f0a000; color: #2a1a10; box-shadow: 0 0 0 3px var(--bg), 0 4px 8px -2px rgba(0, 0, 0, .35);
}
.hint-badge::after { /* little speech-bubble tail pointing at the button */
  content: ""; position: absolute; left: 50%; bottom: -4px; width: 10px; height: 10px; background: inherit;
  transform: translateX(-50%) rotate(45deg); border-radius: 2px; z-index: -1;
}
.hint-badge.empty { background: #e0483c; color: #fff; }
.hint-badge.bump { animation: badge-bump .5s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes badge-bump { 40% { transform: translateX(-50%) scale(1.45); } }

/* welcome page: seeds and hints side by side */
.seed-pill.stash { flex-direction: row; gap: 0; padding: 6px 4px; }
.stash-item { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 0 11px; }
.stash-item + .stash-item { border-left: 2px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.hint-pill-ico .bulb-svg { width: 28px; height: 28px; display: block; }
.bulb-svg { display: block; overflow: visible; }
.net-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* out of hints */
.hints-dlg { text-align: center; }
.hints-stage { height: 96px; display: grid; place-items: center; }
.hints-stage .bulb-svg { width: 78px; height: 78px; }
.hints-stage .bulb-svg.off { filter: grayscale(1) opacity(.5) drop-shadow(0 3px 2px rgba(0, 0, 0, .2)); animation: bulb-flicker 2.4s ease-in-out infinite; }
@keyframes bulb-flicker { 0%, 88%, 100% { opacity: 1; } 92% { opacity: .55; } 95% { opacity: .9; } }
.fly-seed .bulb-svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .35)); }

/* ================= AUTO ✕ UNLOCK (finish World 6) ================= */
.row.locked #set-auto { opacity: .4; cursor: not-allowed; }
.row.locked small { color: var(--ink); opacity: .85; }
.row.locked small b { color: var(--accent); }
.lock-tag {
  display: inline-flex; align-items: center; gap: 3px; vertical-align: 2px; margin-left: 4px; padding: 1px 8px 1px 5px; border-radius: 99px;
  font-style: normal; font-weight: 900; font-size: .68rem; letter-spacing: .03em; text-transform: uppercase;
  background: #ffe9a8; color: #6b4a00; box-shadow: inset 0 0 0 1.5px rgba(107, 74, 0, .35);
}
.lock-tag[hidden] { display: none; }
.lock-tag svg { width: 11px; height: 11px; }
.tool.locked { opacity: .72; }
.tool-lock { position: absolute; top: 3px; right: 6px; width: 15px; height: 15px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); pointer-events: none; }
.tool-lock[hidden] { display: none; }
.tool-lock svg { display: block; width: 100%; height: 100%; }
.tool.nudge { animation: cell-nudge .4s; }
.unlock-note { margin: -4px 0 12px; padding: 8px 12px; border-radius: 14px; font-weight: 700; font-size: .9rem; background: color-mix(in srgb, #4cae4f 18%, transparent); color: var(--ink); box-shadow: inset 0 0 0 2px color-mix(in srgb, #4cae4f 45%, transparent); }
.unlock-note[hidden] { display: none; }
.unlock-note b { color: #2f8f3a; }

/* ================= SHINY STAMPS (Gold / Neon / Ruby / Diamond) ================= */
.bug-svg.fx-gold    { filter: url(#fx-gold) drop-shadow(0 0 3px rgba(255, 190, 0, .85)); }
.bug-svg.fx-neon    { filter: url(#fx-neon) drop-shadow(0 0 4px #39ff14) drop-shadow(0 0 10px rgba(57, 255, 20, .65)); }
.bug-svg.fx-ruby    { filter: url(#fx-ruby) drop-shadow(0 0 4px rgba(255, 40, 70, .85)); }
.bug-svg.fx-diamond { filter: url(#fx-diamond) drop-shadow(0 0 5px rgba(130, 225, 255, .95)); }

.stamp.rare .stamp-face { background: var(--face, #fffdf4); }
.set-gold { --face: #fff3c4; } .set-neon { --face: #1c2f22; } .set-ruby { --face: #ffe3e8; } .set-diamond { --face: #eaf9ff; }
.stamp.rare.locked .stamp-face { background: #e8dfc9; }

.stamp.set-gold .stamp-pic    { background: radial-gradient(circle at 30% 22%, #fff6b0, #f0b400 62%, #8a5600); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .75), inset 0 0 0 3px #b07a00; }
.stamp.set-neon .stamp-pic    { background: radial-gradient(circle at 50% 42%, #14381d, #04100a 82%); box-shadow: inset 0 0 0 2px #39ff14, inset 0 0 14px rgba(57, 255, 20, .5); }
.stamp.set-ruby .stamp-pic    { background: radial-gradient(circle at 30% 22%, #ff8294, #b0102f 66%, #4a0613); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7), inset 0 0 0 3px #7c0a20; }
.stamp.set-diamond .stamp-pic { background: radial-gradient(circle at 30% 22%, #f4feff, #86d8ff 55%, #2b78d8); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85), inset 0 0 0 3px #2b78d8; }
.stamp.set-neon .stamp-rays   { opacity: .25; background: repeating-conic-gradient(from 0deg at 50% 55%, rgba(57, 255, 20, .6) 0 8deg, transparent 8deg 20deg); }
.stamp.set-gold .stamp-cap    { color: #8f6100; }
.stamp.set-neon .stamp-cap    { color: #39ff14; text-shadow: 0 0 6px rgba(57, 255, 20, .7); }
.stamp.set-ruby .stamp-cap    { color: #b0102f; }
.stamp.set-diamond .stamp-cap { color: #1f6fd0; }
.stamp.rare .stamp-cap span   { letter-spacing: .16em; font-weight: 900; }

/* a moving glint across the foil, and little twinkles */
.stamp.rare .shine {
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .95) 50%, transparent 62%); background-size: 260% 100%; background-position: 140% 0;
  opacity: 1; animation: foil-sweep 3.4s ease-in-out infinite;
}
@keyframes foil-sweep { 0%, 35% { background-position: 140% 0; } 80%, 100% { background-position: -60% 0; } }
.spark {
  position: absolute; z-index: 4; width: calc(var(--w) * .15); aspect-ratio: 1; background: #fff; pointer-events: none; opacity: 0;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: twinkle 2.8s ease-in-out infinite;
}
.spark.a { left: 12%; top: 14%; }
.spark.b { right: 14%; top: 30%; width: calc(var(--w) * .1); animation-delay: .9s; }
.spark.c { left: 28%; bottom: 24%; width: calc(var(--w) * .11); animation-delay: 1.8s; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
.stamp.locked .spark, .stamp.xs .spark { display: none; }
.stamp.set-neon.earned .stamp-pic { animation: neon-pulse 2.2s ease-in-out infinite; }
@keyframes neon-pulse { 50% { box-shadow: inset 0 0 0 2px #39ff14, inset 0 0 24px rgba(57, 255, 20, .8); } }
/* the "?" on a secret slot takes the set's colour */
.stamp.locked.set-gold .stamp-pic::after    { color: rgba(255, 255, 255, .8); }
.stamp.locked.set-neon .stamp-pic::after    { color: rgba(30, 190, 20, .6); }
.stamp.locked.set-ruby .stamp-pic::after    { color: rgba(255, 255, 255, .75); }
.stamp.locked.set-diamond .stamp-pic::after { color: rgba(255, 255, 255, .85); }

/* ================= ALBUM: section tabs, gift flags ================= */
/* Index tabs: they stick out of the right edge of the book like binder dividers, one under the other.
   Each shows a gem in its colour and the first letters of its name; the open one is cream and pops out a little further. */
.album { padding-right: 26px; }
.album-tabs { position: absolute; right: -27px; top: 44px; z-index: 2; display: flex; flex-direction: column; gap: 7px; }
.album-tab {
  position: relative; width: 36px; height: 50px; padding: 0 0 0 4px; cursor: pointer; font-family: inherit;
  display: grid; place-items: center;
  border: 0; border-radius: 0 13px 13px 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 52%, #26140a), color-mix(in srgb, var(--tc) 74%, #3f2410));
  box-shadow: 3px 3px 5px rgba(0, 0, 0, .38), inset 0 2px 0 rgba(255, 235, 200, .28), inset -2px 0 0 rgba(255, 235, 200, .14);
  transition: width .2s cubic-bezier(.3, 1.5, .5, 1), background .2s, transform .12s;
}
.album-tab:hover { width: 38px; }
.album-tab:active { transform: scale(.96); transform-origin: left center; }
.tab-gem { /* a glassy bead that holds the folder's bug */
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; pointer-events: none;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .85) 0 7%, color-mix(in srgb, var(--tc) 38%, #fff) 8% 34%, color-mix(in srgb, var(--tc) 70%, #fff) 62%, var(--tc));
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .3), inset 0 -3px 5px rgba(0, 0, 0, .18), 0 0 9px color-mix(in srgb, var(--tc) 70%, transparent);
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1);
}
.tab-gem .bug-svg { width: 21px; height: 21px; }
.album-tab[aria-selected="true"] {
  width: 44px; z-index: 3;
  background: linear-gradient(90deg, #f3e6c4, #fffaf0);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .4), inset -4px 0 0 var(--tc), inset 0 2px 0 rgba(255, 255, 255, .8);
}
.album-tab[aria-selected="true"] .tab-gem { transform: scale(1.12); }
.album-tab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* The folder's title at the top of each page: its bug, its name and kind, and how many you have */
.page-title {
  display: flex; align-items: center; gap: 9px; margin: 0 0 6px; padding: 0 2px 7px;
  border-bottom: 2.5px solid var(--tc, #8a7455);
  border-image: linear-gradient(90deg, var(--tc, #8a7455) 60%, transparent) 1;
}
.pt-gem {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .9) 0 7%, color-mix(in srgb, var(--tc) 30%, #fff) 8% 40%, color-mix(in srgb, var(--tc) 62%, #fff) 72%, var(--tc));
  box-shadow: 0 0 0 2px rgba(60, 35, 10, .35), inset 0 -3px 6px rgba(0, 0, 0, .16), 0 2px 6px color-mix(in srgb, var(--tc) 55%, transparent);
}
.pt-gem .bug-svg { width: 25px; height: 25px; }
.pt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.05; }
.pt-text b { font-family: "Bradley Hand", "Segoe Script", "Marker Felt", cursive; font-size: 1.28rem; font-weight: 800; color: #3a2e22; white-space: nowrap; }
.pt-text small { font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--tc) 70%, #3a2e22); margin-top: 2px; }
.pt-count { flex: none; font-size: .78rem; font-weight: 800; color: #8a7455; background: rgba(120, 90, 50, .12); border-radius: 99px; padding: 4px 10px; font-variant-numeric: tabular-nums; }
.pt-count b { color: #3a2e22; font-size: .95rem; }
.rare-slot .gift-flag { position: absolute; top: 2px; right: 6px; width: 28px; height: 28px; z-index: 3; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); animation: gift-wiggle 3s ease-in-out infinite; }
.gift-svg { display: block; width: 100%; height: 100%; }
@keyframes gift-wiggle { 0%, 80%, 100% { transform: rotate(0); } 86% { transform: rotate(-13deg); } 93% { transform: rotate(10deg); } }
.gifts-btn { gap: 5px; }
.gifts-btn #gifts-ico { display: inline-flex; width: 20px; height: 20px; }

dialog.card.gifts-dlg { text-align: left; }
.gifts-dlg h2 { text-align: center; }
.gift-list { display: grid; gap: 8px; margin: 6px 0 12px; max-height: 50dvh; overflow: auto; }
.gift { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 6%, transparent); opacity: .85; }
.gift.on { opacity: 1; background: color-mix(in srgb, #ffd23f 22%, var(--card)); box-shadow: inset 0 0 0 2px rgba(240, 160, 0, .45); }
.gift-stamp { flex: none; width: 46px; display: grid; place-items: center; }
.gift-stamp.mystery { height: 56px; border-radius: 8px; background: #e8dfc9; font-weight: 900; font-size: 1.4rem; color: rgba(90, 70, 40, .4); }
.gift-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gift-text b { font-size: .95rem; }
.gift-text small { font-size: .72rem; font-weight: 800; color: var(--ink-soft); }
.gift-text em { font-style: normal; font-size: .82rem; line-height: 1.3; }

.perk-note { display: flex; gap: 10px; align-items: flex-start; text-align: left; margin: 4px 0 10px; padding: 9px 12px; border-radius: 14px; font-size: .88rem; line-height: 1.35; background: color-mix(in srgb, #ffd23f 28%, var(--card)); box-shadow: inset 0 0 0 2px rgba(240, 160, 0, .55); animation: chip-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.perk-note[hidden] { display: none; }
.perk-ico { flex: none; width: 28px; height: 28px; }

/* ================= BUG BOX: the pill, progress bars, dialogs ================= */
.crate-svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }
.home-top-left { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 18px; z-index: 3; }
.box-pill {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border: 0; border-radius: 16px; cursor: pointer;
  background: var(--card); color: var(--ink); text-align: left; font-family: inherit;
  box-shadow: var(--shadow), inset 0 0 0 2px color-mix(in srgb, var(--ink) 8%, transparent); transition: transform .12s;
}
.box-pill:active { transform: scale(.95); }
.box-ico { width: 36px; height: 36px; display: grid; place-items: center; }
.box-text { display: flex; flex-direction: column; line-height: 1.1; gap: 1px; }
.box-text b { font-size: .82rem; font-weight: 900; }
.box-text small { font-size: .68rem; font-weight: 800; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.box-bar { display: block; height: 5px; width: 66px; border-radius: 99px; margin-top: 2px; overflow: hidden; background: color-mix(in srgb, var(--ink) 15%, transparent); }
.box-bar > i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #4cae4f, #9be564); transition: width .5s ease; }
.box-bar.big { height: 13px; width: auto; flex: 1; margin: 0; }
.box-new { position: absolute; top: -9px; right: -7px; padding: 2px 7px; border-radius: 99px; font-size: .6rem; font-weight: 900; letter-spacing: .04em; background: #ff5a3c; color: #fff; box-shadow: 0 0 0 2px #fff; animation: badge-pulse 1.6s ease-in-out infinite; }
.box-new[hidden], .box-count[hidden] { display: none; }
.box-count { position: absolute; top: -10px; right: -8px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; font-weight: 900; font-size: .85rem; background: #ff5a3c; color: #fff; box-shadow: 0 0 0 3px #fff; }
.box-pill.ready { color: #3a210d; background: linear-gradient(180deg, #fff2b6, #ffcf4d); box-shadow: 0 0 0 3px #fff, 0 0 24px 5px rgba(255, 200, 40, .8), var(--shadow); animation: box-ready 1.4s ease-in-out infinite; }
.box-pill.ready .box-text small { color: #6b4a00; }
.box-pill.ready .box-bar { background: rgba(120, 80, 0, .2); }
.box-pill.ready .box-bar > i { background: #e8a800; }
.box-pill.ready .box-ico { animation: crate-jiggle 1.4s ease-in-out infinite; }
@keyframes box-ready { 50% { transform: scale(1.07); } }
@keyframes crate-jiggle { 0%, 55%, 100% { transform: rotate(0); } 66% { transform: rotate(-11deg); } 77% { transform: rotate(9deg); } 88% { transform: rotate(-5deg); } }

/* in a Free Play game */
.box-chip { gap: 6px; }
.box-chip-ico { display: inline-flex; width: 22px; height: 22px; }
.box-chip.ready { background: linear-gradient(180deg, #fff2b6, #ffd966); color: #3a210d; }
.box-chip[hidden] { display: none; }
/* on the Free Play win screen */
.win-box { display: flex; align-items: center; gap: 10px; text-align: left; margin: -2px 0 12px; padding: 8px 12px; border-radius: 16px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.win-box[hidden] { display: none; }
.win-box.earned { color: #3a210d; background: linear-gradient(180deg, #fff2b6, #ffd966); box-shadow: 0 0 0 2px #fff, 0 0 18px rgba(255, 200, 40, .7); animation: box-ready 1.2s ease-in-out 3; }
.win-box.earned .box-bar { background: rgba(120, 80, 0, .2); }
.win-box.earned .box-bar > i { background: #e8a800; }
.wb-ico { flex: none; width: 42px; height: 42px; }
.wb-text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wb-text b { font-size: .95rem; font-weight: 900; }
.wb-text .box-bar { width: 100%; }
.wb-text small { font-size: .76rem; font-weight: 700; opacity: .85; }

/* "what is this?" */
.box-dlg { text-align: center; }
.info-stage { height: 104px; display: grid; place-items: center; }
.info-stage .crate-svg { width: 100px; height: 100px; animation: crate-jiggle 3.2s ease-in-out infinite; }
.box-progress { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; }
.box-progress b { font-weight: 900; font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; }
.box-facts { text-align: left; margin: 0 0 8px; padding-left: 20px; display: grid; gap: 6px; font-size: .9rem; line-height: 1.35; }
.box-found { margin: 6px 0 4px; font-size: .8rem; font-weight: 800; color: var(--ink-soft); }

/* the opening show */
.open-stage { position: relative; height: 330px; margin: -6px 0 4px; }
.burst { position: absolute; left: 50%; top: 150px; width: 380px; height: 380px; margin: -190px 0 0 -190px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 70, .8) 0 7deg, transparent 7deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 66%); mask: radial-gradient(circle, #000 18%, transparent 66%); }
.open-stage.go .burst { animation: burst-in 2.2s 1.15s ease-out forwards; }
@keyframes burst-in { 0% { opacity: 0; transform: scale(.3) rotate(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.2) rotate(80deg); } }
.open-crate { position: absolute; left: 50%; bottom: 0; width: 170px; height: 170px; margin-left: -85px; }
.crate-body, .crate-lid { position: absolute; inset: 0; }
.crate-lid { transform-origin: 12% 42%; }
.open-stage.go .open-crate { animation: crate-shake 1.1s ease-in-out, crate-away .6s 2.3s ease-in forwards; }
.open-stage.go .crate-lid { animation: lid-pop .5s 1.1s cubic-bezier(.3, 1.5, .5, 1) forwards; }
@keyframes crate-shake {
  0%, 100% { transform: translateX(0) rotate(0); } 10% { transform: translateX(-7px) rotate(-5deg); } 20% { transform: translateX(7px) rotate(5deg); }
  30% { transform: translateX(-9px) rotate(-6deg); } 40% { transform: translateX(9px) rotate(6deg); } 55% { transform: translateX(-10px) rotate(-7deg); }
  70% { transform: translateX(10px) rotate(7deg) scale(1.05); } 85% { transform: translateX(-4px) rotate(-3deg) scale(1.08); }
}
/* a shiny bug tangled in the Daily Seed net: no crate, the burst fires straight away */
.open-stage.net .open-crate { display: none; }
.open-stage.net.go .burst { animation: burst-in 2.2s .5s ease-out forwards; }
@keyframes lid-pop { to { transform: translate(-22px, -40px) rotate(-64deg); } }
@keyframes crate-away { to { transform: translateY(46px) scale(.7); opacity: 0; } }
.open-reveal { position: absolute; left: 0; right: 0; top: 0; display: grid; place-items: center; pointer-events: none; z-index: 3; }
.open-reveal .stamp { pointer-events: auto; animation: stamp-rise 1s cubic-bezier(.2, 1.1, .3, 1) both; }
@keyframes stamp-rise {
  0% { transform: translateY(190px) scale(.15) rotateY(720deg); opacity: 0; }
  65% { transform: translateY(-10px) scale(1.08) rotateY(-10deg); opacity: 1; }
  100% { transform: translateY(0) scale(1) rotateY(0); }
}
.reward-chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 4px 0 10px; }
.rchip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 15px 6px 9px; border-radius: 99px; font-weight: 900; background: color-mix(in srgb, #4cae4f 16%, var(--card)); box-shadow: inset 0 0 0 2px color-mix(in srgb, #4cae4f 42%, transparent); animation: chip-pop .5s cubic-bezier(.3, 1.8, .5, 1) both; }
.rchip:nth-child(2) { animation-delay: .22s; }
.rchip .seed-svg, .rchip .bulb-svg { width: 26px; height: 26px; }
@keyframes chip-pop { from { transform: scale(.3); opacity: 0; } }

/* Armored Shell (Gift Bug) */
.shield-ico { display: inline-flex; width: 22px; height: 22px; margin-left: 4px; }
.shield-ico[hidden] { display: none; }
.shield-svg { width: 100%; height: 100%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.lives-chip.shielded { animation: shield-hit .8s ease-out; }
@keyframes shield-hit { 25% { box-shadow: 0 0 0 4px #7fd6ff, 0 0 22px #7fd6ff; transform: scale(1.07); } }

/* ================= EQUIPPING GIFT BUGS + BUYING A BOX ================= */
.btn.gold { background: linear-gradient(180deg, #ffd96a, #f0a800); color: #3a210d; box-shadow: 0 6px 16px -6px #f0a800; }
.btn.gold:disabled { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink-soft); box-shadow: none; opacity: .8; }
.btn.gold[hidden], .equip-btn[hidden] { display: none; }
.equip-btn { background: color-mix(in srgb, #ffd23f 35%, var(--card)); box-shadow: inset 0 0 0 2px rgba(240, 160, 0, .55); }
.equip-btn.on { background: #ffd23f; color: #3a210d; }

/* the slot strip at the top of the Gift Bugs list */
.loadout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 2px 0 10px; }
.lslot { min-width: 0; min-height: 84px; overflow: hidden; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; font-size: .66rem; font-weight: 800; line-height: 1.1; padding: 4px;
  background: color-mix(in srgb, var(--ink) 7%, transparent); border: 2px dashed color-mix(in srgb, var(--ink) 25%, transparent); color: var(--ink-soft); }
.lslot.full { border: 2px solid rgba(240, 160, 0, .8); background: color-mix(in srgb, #ffd23f 30%, var(--card)); color: var(--ink); }
.lslot.locked { opacity: .6; }
.lslot .gift-stamp { width: 28px; height: 38px; }
.lslot .gift-stamp .stamp { transform: scale(.72); transform-origin: center top; }
.lslot b { font-size: .68rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gift-eq { flex: none; margin-left: auto; border: 0; border-radius: 12px; padding: 7px 11px; font-weight: 800; font-size: .78rem; background: color-mix(in srgb, var(--ink) 12%, transparent); color: var(--ink); }
.gift-eq.on { background: #ffd23f; color: #3a210d; }
.gift.equipped { box-shadow: inset 0 0 0 2px #f0a800; }
.rare-slot .gift-flag.on { filter: drop-shadow(0 0 5px #ffd23f) drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }

/* odds panel in the Bug Box info dialog */
.box-odds { text-align: left; margin: 6px 0 4px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 6%, transparent); font-size: .78rem; line-height: 1.35; }
.box-odds h3 { margin: 0 0 6px; font-size: .8rem; }
.odds-sets { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-bottom: 6px; }
.odds-sets span { display: flex; align-items: center; gap: 6px; font-weight: 800; }
.odds-sets i { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .35); }
.odds-sets em { font-style: normal; margin-left: auto; font-variant-numeric: tabular-nums; }
.odds-extra { color: var(--ink-soft); font-weight: 700; }
.slots-warn { color: #c0392b; }
.loadout.shake { animation: slot-shake .4s ease-in-out; }
@keyframes slot-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }

/* ================= GARDEN SCENERY behind the board ================= */
#scenery { position: fixed; inset: 0; z-index: -1; pointer-events: none; display: none; overflow: hidden;
  background: linear-gradient(180deg, var(--sky1, #d6efff), var(--sky2, #fbf4e4) 62%); }
body.scene-on #scenery { display: block; }
#scenery::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 60%, transparent), transparent 26%); }
.sc-sky { position: absolute; left: 0; top: 0; width: 100%; height: 46%; }
.sc-land { position: absolute; left: 0; bottom: 0; width: 100%; height: clamp(200px, 38vh, 400px); }
body.scene-on .bg-deco, body.scene-on .crawlers { display: none; }
:root[data-theme="dark"] #scenery { filter: brightness(.5) saturate(.9); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] #scenery { filter: brightness(.5) saturate(.9); } }

.sw { transform-box: fill-box; transform-origin: 50% 100%; animation: sc-sway 4.6s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes sc-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.fl { animation: sc-float var(--t, 9s) ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes sc-float { to { transform: translate(var(--dx), var(--dy)); } }
.bf { transform-box: fill-box; transform-origin: 50% 50%; animation: sc-flap .45s ease-in-out infinite alternate; }
@keyframes sc-flap { to { transform: scaleX(.45); } }
.gl { animation: sc-glow 2.4s ease-in-out infinite alternate; }
@keyframes sc-glow { from { opacity: .12; } to { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { #scenery * { animation: none !important; } }
/* the rule line sits over the scenery: give it a soft card so plants never fight the text */
body.scene-on .rule-line { background: color-mix(in srgb, var(--card) 82%, transparent); padding: 6px 12px; border-radius: 12px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

/* each world card on the level map wears its own little scene */
.world .w-scene { position: absolute; left: 0; right: 0; top: 7px; height: 100px; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, var(--sky1), var(--sky2)); border-radius: 0 0 22px 22px; }
.world .w-scene .sc-sky { height: 100%; }
.world .w-scene .sc-land { height: 100%; }
.world .w-scene * { animation: none !important; }
.world header { position: relative; z-index: 1; margin-bottom: 20px; }
.world .w-title { background: color-mix(in srgb, var(--card) 80%, transparent); padding: 4px 10px; border-radius: 12px; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
:root[data-theme="dark"] .world .w-scene { filter: brightness(.55) saturate(.9); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .world .w-scene { filter: brightness(.55) saturate(.9); } }
.world .w-scene .sc-land { height: 74%; }
.world .w-title { flex: 0 1 auto; max-width: 66%; }
.world .w-bug { margin-left: auto; }

/* the Bug Box that comes with a world stamp */
.box-gift { display: flex; gap: 10px; align-items: center; text-align: left; margin: 2px 0 10px; padding: 9px 12px; border-radius: 14px; font-size: .88rem; line-height: 1.35;
  background: color-mix(in srgb, #ffd23f 28%, var(--card)); box-shadow: inset 0 0 0 2px rgba(240, 160, 0, .55); animation: chip-pop .6s .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.box-gift .bg-ico { flex: none; width: 44px; height: 44px; }
.box-gift .crate-svg { animation: crate-jiggle 2.6s ease-in-out infinite; }

/* the rank line on the Free Play win screen */
.win-free { margin: 2px 0 10px; padding: 8px 12px; border-radius: 14px; font-weight: 800; font-size: .9rem; text-align: center;
  background: color-mix(in srgb, #4cae4f 22%, var(--card)); box-shadow: inset 0 0 0 2px rgba(76, 174, 79, .5); }
.win-free[hidden] { display: none; }

/* ================= SPLASH (opening screen) =================
   Letters drop in one by one and bounce; at about 2s the whole thing fades out to the home screen.
   It is pure CSS (so it can never get stuck): screens.js only removes it afterwards and lets a tap skip it. */
.splash {
  position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 38%, var(--bg), var(--bg2));
  animation: splash-out .5s ease 2s forwards;
}
.splash.skip { animation: splash-out .22s ease forwards; }
.splash-in { text-align: center; padding: 0 12px; }
.splash-logo {
  width: 84px; height: 84px; margin: 0 auto 10px; display: grid; place-items: center; font-size: 3.1rem;
  background: var(--card); border-radius: 28px; box-shadow: var(--shadow), 0 8px 0 color-mix(in srgb, var(--ink) 14%, transparent);
  animation: splash-pop .6s cubic-bezier(.3, 1.7, .5, 1) 1.45s both;
}
.splash-logo .bug-svg { width: 1em; height: 1em; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .3)); }
.splash-word { display: flex; justify-content: center; font-size: clamp(3.2rem, 17vw, 5.6rem); line-height: 1; font-weight: 900; letter-spacing: -.02em; }
.splash-word span {
  display: inline-block; color: var(--c);
  -webkit-text-stroke: 7px var(--line); paint-order: stroke fill;
  text-shadow: 0 5px 0 color-mix(in srgb, var(--line) 80%, transparent);
  animation: splash-drop .95s linear both;
  animation-delay: calc(.15s + var(--i) * 105ms);
}
:root[data-theme="dark"] .splash-word span { -webkit-text-stroke-color: #0b120d; }
.splash-sub {
  margin: 12px 0 0; font-weight: 800; color: var(--ink-soft); letter-spacing: .08em; text-transform: uppercase; font-size: .78rem;
  animation: splash-fade .5s ease 1.55s both;
}
/* fall from above, squash on landing, bounce twice */
@keyframes splash-drop {
  0%   { transform: translateY(-85vh) rotate(-16deg); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .6); }
  8%   { opacity: 1; }
  50%  { transform: translateY(0) rotate(3deg) scale(1.18, .78); animation-timing-function: ease-out; }
  68%  { transform: translateY(-.28em) rotate(-2deg) scale(.95, 1.06); animation-timing-function: ease-in; }
  82%  { transform: translateY(0) scale(1.06, .92); animation-timing-function: ease-out; }
  92%  { transform: translateY(-.06em) scale(.99, 1.01); animation-timing-function: ease-in; }
  100% { transform: none; opacity: 1; }
}
@keyframes splash-pop { from { transform: scale(0) rotate(-40deg); opacity: 0; } }
@keyframes splash-fade { from { opacity: 0; transform: translateY(6px); } }
@keyframes splash-out { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) {
  .splash { animation: splash-out .3s ease .6s forwards; }
  .splash-word span, .splash-logo, .splash-sub { animation: none; }
}

/* ================= LEGAL (Terms of Use / Privacy Policy) ================= */
.legal-line { position: relative; z-index: 1; margin: 18px 0 6px; text-align: center; font-size: .74rem; font-weight: 700; color: var(--ink-soft); line-height: 1.5; }
.legal-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.legal-btns { display: flex; gap: 6px; flex: none; }
dialog.legal-dlg { display: none; width: min(560px, calc(100vw - 20px)); overflow: hidden; }
dialog.legal-dlg[open] { display: block; }
.legal-tabs { margin: 0 0 10px; }
.legal-tabs button { flex: 1; font-size: .9rem; padding: 8px 10px; }
.legal-body {
  max-height: calc(100dvh - 190px); overflow: auto; -webkit-overflow-scrolling: touch; outline: none;
  padding: 2px 6px 2px 2px; font-size: .9rem; line-height: 1.55; font-weight: 600;
}
.legal-body h3 { margin: 18px 0 4px; font-size: .98rem; }
.legal-body p, .legal-body li { margin: 6px 0; }
.legal-body ul { padding-left: 1.2em; margin: 6px 0; }
.legal-body a { color: var(--accent); }
.legal-meta { color: var(--ink-soft); font-weight: 800; margin: 0 0 8px; font-size: .8rem; }
.legal-intro { font-weight: 800; }

/* ================= ALBUM on phones: six stamps (2 x 3) that fit the screen without scrolling =================
   On a screen shorter than ~960px the stamps get a little smaller, as much as the screen height needs, so the whole page
   and the page arrows are visible without moving the screen around. */
@media (max-height: 960px) {
  .slots { gap: 6px 6px; }
  .slots .stamp.md { --w: clamp(44px, calc(((100dvh - 246px) / 3 - 62px) / 1.27), min(120px, calc((min(100vw, 560px) - 154px) / 2 - 18px))); }
  .slot { padding: 11px 4px 6px; }
  .slot .cap { font-size: .86rem; margin-top: 4px; overflow-wrap: anywhere; }
  .slot small { font-size: .6rem; line-height: 1.15; overflow-wrap: anywhere; }
  .slot .gift-flag { width: 24px; height: 24px; right: 3px; top: 0; }
  .slot::before { background-size: 20px 20px; }
  .album-cover { padding: 14px 12px 12px 32px; gap: 10px; }
  .album-page { padding: 10px 8px 8px; }
  .page-title { margin-bottom: 4px; padding-bottom: 5px; gap: 8px; }
  .pt-gem { width: 30px; height: 30px; } .pt-gem .bug-svg { width: 22px; height: 22px; }
  .pt-text b { font-size: 1.15rem; }
}

/* keyboard / mouse tips in "How to play" only make sense on a computer */
@media (hover: none) and (pointer: coarse) { .kbd-tip { display: none; } }

/* ================= SUPER HIDDEN: the onyx stamps (spider · beetle · cricket) ================= */
.bug-svg.fx-onyx { filter: url(#fx-onyx) drop-shadow(0 0 2px rgba(210, 220, 255, .75)) drop-shadow(0 0 5px rgba(224, 21, 59, .45)); }
/* an onyx bug carries a red crystal set in its back; --cx/--cy/--cw place it on each bug's body */
.onyx-bug { position: relative; display: inline-grid; place-items: center; line-height: 0; --cx: 50%; --cy: 58%; --cw: 22%; }
.onyx-bug.ob-7 { --cy: 62%; --cw: 20%; }
.onyx-bug.ob-5 { --cy: 60%; --cw: 20%; }
.onyx-bug.ob-6 { --cy: 62%; --cw: 20%; }
.onyx-bug .bug-svg { width: 100%; height: 100%; }
.crystal-svg { position: absolute; left: var(--cx); top: var(--cy); width: var(--cw); transform: translate(-50%, -50%); height: auto; pointer-events: none; filter: drop-shadow(0 0 3px rgba(255, 40, 80, .9)); animation: crystal-beat 2.6s ease-in-out infinite; }
@keyframes crystal-beat { 0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 40, 80, .7)); } 50% { filter: drop-shadow(0 0 7px rgba(255, 60, 100, 1)); } }

.set-onyx { --face: #1b1a22; }
.stamp.set-onyx .stamp-pic {
  background: radial-gradient(circle at 30% 22%, #6b6685, #22202e 58%, #07060b);
  box-shadow: inset 0 0 0 2px rgba(225, 230, 248, .9), inset 0 0 0 3px #6c6784, inset 0 0 16px rgba(224, 21, 59, .35);
}
.stamp.set-onyx .stamp-rays { opacity: .22; background: repeating-conic-gradient(from 0deg at 50% 55%, rgba(255, 70, 110, .6) 0 6deg, transparent 6deg 18deg); }
.stamp.set-onyx .stamp-cap { color: #ff5a78; text-shadow: 0 0 6px rgba(255, 60, 100, .7); }
.stamp.set-onyx.earned .stamp-pic { animation: onyx-pulse 3s ease-in-out infinite; }
@keyframes onyx-pulse { 50% { box-shadow: inset 0 0 0 2px rgba(225, 230, 248, .9), inset 0 0 0 3px #6c6784, inset 0 0 26px rgba(255, 40, 90, .6); } }
.stamp.rare.locked.set-onyx .stamp-face { background: #2c2937; }
.stamp.locked.set-onyx .stamp-pic { background: radial-gradient(circle at 30% 22%, #3a3748, #12111a); box-shadow: inset 0 0 0 2px rgba(200, 205, 225, .35), inset 0 0 0 3px #3d3a4f; }
.stamp.locked.set-onyx .stamp-pic::after { color: rgba(255, 70, 110, .65); text-shadow: 0 0 8px rgba(255, 40, 90, .6); }
.stamp.locked.set-onyx .stamp-cap { color: #8a8599; text-shadow: none; }

/* the folder's tab: a black glass bead with a red glow */
.album-tab.secret .tab-gem, .page-title .pt-gem.onyx {
  background: radial-gradient(circle at 34% 28%, #fff 0 6%, #8a85a6 8% 26%, #1d1b28 66%, #07060b);
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .55), inset 0 -3px 5px rgba(0, 0, 0, .3), 0 0 9px rgba(224, 21, 59, .65);
}
.album-tab.secret .tab-gem .onyx-bug { width: 22px; height: 22px; --cw: 24%; }
.album-tab.secret.fresh .tab-gem { animation: tab-ping 1.3s ease-in-out infinite; }
@keyframes tab-ping { 50% { transform: scale(1.18); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .55), 0 0 16px 3px rgba(255, 40, 90, .95); } }
.pt-gem .onyx-bug { width: 26px; height: 26px; --cw: 24%; }

/* the Super Hidden page itself: a night sky, three stamps */
.album-page.secret-page {
  background:
    radial-gradient(1.5px 1.5px at 18% 22%, #fff 50%, transparent), radial-gradient(1px 1px at 72% 14%, #dfe6ff 50%, transparent),
    radial-gradient(1.5px 1.5px at 86% 58%, #fff 50%, transparent), radial-gradient(1px 1px at 30% 80%, #dfe6ff 50%, transparent),
    radial-gradient(1px 1px at 56% 46%, #fff 50%, transparent), radial-gradient(1.2px 1.2px at 8% 64%, #cfd8ff 50%, transparent),
    linear-gradient(90deg, rgba(0, 0, 0, .35), transparent 6%), linear-gradient(180deg, #1d1a2b, #0e0c16);
  color: #e8e4f4;
  box-shadow: inset 0 0 34px rgba(224, 21, 59, .16), 0 3px 8px rgba(0, 0, 0, .35);
}
.secret-page .pt-text b { color: #f2eefc; }
.secret-page .pt-text small { color: #ff7d97; }
.secret-page .pt-count { background: rgba(255, 255, 255, .1); color: #b8b2cf; }
.secret-page .pt-count b { color: #fff; }
.secret-page .slot .cap { color: #f2eefc; }
.secret-page .slot small { color: #a9a3c0; }
.slots.slots-3 .slot:nth-child(3) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 4px); }
.secret-page .slot { --cc: #7d7898; }
.secret-page .slot::before {
  background:
    linear-gradient(135deg, var(--cc) 50%, transparent 50%) top left / 24px 24px no-repeat,
    linear-gradient(225deg, var(--cc) 50%, transparent 50%) top right / 24px 24px no-repeat,
    linear-gradient(45deg, var(--cc) 50%, transparent 50%) bottom left / 24px 24px no-repeat,
    linear-gradient(315deg, var(--cc) 50%, transparent 50%) bottom right / 24px 24px no-repeat,
    rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(200, 195, 230, .22);
}
.secret-page .slot.empty .cap { color: #9d97b6; }
.secret-note { margin: 12px 4px 0; text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: #8f89aa; line-height: 1.35; }
.secret-note b { color: #ff7d97; }
.perk-ico .crystal-svg { position: static; display: block; width: 100%; height: 100%; transform: none; }