:root{
  --bg:#fff7ef;
  --bg-accent:#ffe1d1;
  --card:#fffdf9cc;
  --ink:#241815;
  --muted:#7c5d55;
  --line:#e6c6b5;
  --shadow:0 18px 50px rgba(71, 36, 22, .12);
  --radius:28px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at top, #fff3eb 0%, var(--bg) 44%, #ffeede 100%);
  min-height:100vh;
}

button{font:inherit}
.page-shell{
  width:min(1180px, calc(100% - 32px));
  margin:0 auto;
  padding:36px 0 56px;
}

.hero{
  text-align:center;
  max-width:760px;
  margin:0 auto 28px;
}

.eyebrow{
  margin:0 0 10px;
  color:#a15c45;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.78rem;
  font-weight:700;
}

h1{
  font-size:clamp(2.2rem, 5vw, 4.6rem);
  line-height:.95;
  margin:0;
}

.lede{
  margin:16px auto 0;
  font-size:clamp(1rem, 2vw, 1.14rem);
  line-height:1.55;
  color:var(--muted);
  max-width:650px;
}

.stage{
  margin-top:34px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  align-items:start;
  justify-items:stretch;
}

.butt-card{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 14px 20px;
  box-shadow:var(--shadow);
  backdrop-filter: blur(8px);
  overflow:visible;
}

.butt-card.featured{
  transform:none;
}
.photo-frame img{object-position:center center;}

.butt-button{
  position:relative;
  display:block;
  width:100%;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  cursor:pointer;
  outline-offset:8px;
}

.butt-button img{
  width:100%;
  aspect-ratio:4 / 5;
  object-fit:cover;
  display:block;
  border-radius:22px;
  border:1px solid rgba(80,45,32,.08);
  box-shadow:0 14px 30px rgba(0,0,0,.08);
}

.featured-gif{
  object-position:center 38%;
}

.tap-hint{
  position:absolute;
  right:12px;
  bottom:12px;
  background:rgba(36, 24, 21, .72);
  color:white;
  padding:7px 10px;
  border-radius:999px;
  font-size:.76rem;
  letter-spacing:.03em;
}

.drop-zone{
  position:relative;
  min-height:300px;
  padding-top:2px;
  overflow:visible;
}

.poop{
  position:absolute;
  left:50%;
  top:-6px;
  transform:translate(-50%, 0);
  font-size:2rem;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.16));
  animation:drop 520ms cubic-bezier(.22,.9,.32,1.2) forwards;
  pointer-events:none;
}

.bubble{
  margin:46px auto 0;
  width:min(92%, 290px);
  background:white;
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px 14px 15px;
  color:var(--ink);
  line-height:1.4;
  box-shadow:0 18px 36px rgba(66,33,20,.10);
  opacity:0;
  transform:translateY(10px) scale(.98);
  animation:bubbleIn 240ms ease forwards 180ms;
}

.bubble::after{
  content:"";
  position:absolute;
  left:50%;
  top:-11px;
  transform:translateX(-50%);
  border-left:11px solid transparent;
  border-right:11px solid transparent;
  border-bottom:11px solid white;
  filter:drop-shadow(0 -1px 0 var(--line));
}

.bubble small{
  display:block;
  margin-top:8px;
  color:#8d6a61;
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.butt-button.is-shaking{
  animation:wiggle .68s ease;
}

.controls{
  margin-top:22px;
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

.primary-btn,
.ghost-btn{
  border-radius:999px;
  padding:12px 18px;
  border:1px solid var(--line);
  cursor:pointer;
  transition:transform .16s ease, background-color .16s ease, border-color .16s ease;
}
.primary-btn{
  background:#241815;
  color:white;
  border-color:#241815;
}
.ghost-btn{
  background:rgba(255,255,255,.65);
  color:var(--ink);
}
.primary-btn:hover,.ghost-btn:hover{transform:translateY(-1px)}

.legend{
  max-width:700px;
  margin:20px auto 0;
  text-align:center;
  color:var(--muted);
  line-height:1.5;
}
.legend code{
  background:#fff;
  padding:2px 6px;
  border-radius:6px;
  border:1px solid var(--line);
}

@keyframes wiggle{
  0%{transform:rotate(0deg) scale(1)}
  18%{transform:rotate(4deg) scale(1.01)}
  36%{transform:rotate(-5deg) scale(1.015)}
  54%{transform:rotate(5deg) scale(1.02)}
  72%{transform:rotate(-3deg) scale(1.012)}
  100%{transform:rotate(0deg) scale(1)}
}
@keyframes drop{
  from{transform:translate(-50%, -26px) scale(.7); opacity:0}
  to{transform:translate(-50%, 24px) scale(1); opacity:1}
}
@keyframes bubbleIn{
  to{opacity:1; transform:translateY(0) scale(1)}
}

@media (max-width: 920px){
  .stage{
    grid-template-columns:1fr;
    max-width:560px;
    margin-inline:auto;
  }
  .butt-card.featured{transform:none}
}

/* === title fix === */
.site-title{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:0.12em !important;
  margin:0 !important;
  line-height:0.96 !important;
}
.site-title-main{
  display:block !important;
  font-size:clamp(2.4rem, 5vw, 4.6rem) !important;
  font-weight:700 !important;
  line-height:0.96 !important;
}
.site-title-sub{
  display:block !important;
  font-size:clamp(1.7rem, 3.2vw, 3.2rem) !important;
  font-weight:700 !important;
  line-height:0.96 !important;
  opacity:0.95 !important;
}

/* === replacement splash === */
.replacing-splash{
  position:absolute;
  left:50%;
  top:96px;
  transform:translateX(-50%) scale(0.5);
  font-size:2rem;
  opacity:0;
  pointer-events:none;
  animation:replaceSplash 360ms ease forwards;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.12));
}
@keyframes replaceSplash{
  0%{opacity:0; transform:translateX(-50%) scale(0.4);}
  35%{opacity:1; transform:translateX(-50%) scale(1.15);}
  100%{opacity:0; transform:translateX(-50%) scale(1.55);}
}

/* === poop origin tweak: closer to butt center === */
.butt-card{
  position:relative;
}

.butt-card .drop-zone{
  position:absolute;
  left:0;
  right:0;
  top:55%;
  pointer-events:none;
}

.poop{
  left:50% !important;
  transform:translateX(-50%) scale(.7) !important;
}



/* final interaction fixes */
.drop-zone{
  pointer-events:none;
}
.controls button{
  pointer-events:auto;
}
.butt-button,
.butt-button img,
.primary-btn,
.ghost-btn{
  pointer-events:auto;
}

.poop-stack,
.poop,
.bubble,
.splatter,
.replacing-splash{
  pointer-events:none;
}

.fade-plop{
  animation: plopOut 0.35s ease forwards;
}

@keyframes plopOut{
  0%{transform:translateY(0) scale(1); opacity:1;}
  60%{transform:translateY(-4px) scale(1.12); opacity:1;}
  100%{transform:translateY(10px) scale(.18); opacity:0;}
}



/* ===== mobile carousel optimization ===== */
.mobile-nav{
  display:none;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:16px auto 8px;
}

.mobile-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.mobile-dot{
  width:10px;
  height:10px;
  padding:0;
  border-radius:999px;
  border:1px solid var(--line);
  background:white;
  cursor:pointer;
  opacity:.7;
}

.mobile-dot.is-active{
  opacity:1;
  background:#241815;
  border-color:#241815;
}

.mobile-nav-btn{
  min-width:44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
}

.controls{
  position:relative;
  z-index:20;
}

@media (max-width: 760px){
  .page-shell{
    width:min(100%, calc(100% - 20px));
    padding:22px 0 110px;
  }

  .hero{
    margin-bottom:18px;
  }

  .lede{
    margin-top:12px;
    font-size:0.98rem;
    line-height:1.45;
  }

  .stage{
    display:flex;
    gap:0;
    overflow:hidden;
    width:100%;
    margin-top:20px;
    align-items:stretch;
    touch-action:pan-y;
  }

  .butt-card{
    min-width:100%;
    width:100%;
    flex:0 0 100%;
    padding:0 2px;
    transition:transform .28s ease, opacity .28s ease;
  }

  .butt-card .butt-button{
    width:100%;
  }

  .butt-card .photo-frame,
  .butt-button,
  .butt-button img{
    width:100%;
  }

  .butt-button img{
    max-height:54vh;
    object-fit:cover;
  }

  .drop-zone{
    min-height:250px;
  }

  .mobile-nav{
    display:flex;
  }

  .controls{
    position:fixed;
    left:10px;
    right:10px;
    bottom:10px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin:0;
    padding:10px;
    border:1px solid var(--line);
    border-radius:18px;
    background:rgba(255, 247, 239, .94);
    backdrop-filter:blur(10px);
    box-shadow:0 14px 32px rgba(71,36,22,.14);
  }

  .controls .primary-btn,
  .controls .ghost-btn{
    width:100%;
    min-height:48px;
    padding:12px 14px;
    font-size:.95rem;
  }

  .legend{
    margin-top:16px;
    padding-bottom:12px;
  }
}



/* desktop fix: never show mobile nav outside mobile */
.mobile-nav{
  display:none !important;
}

@media (max-width: 760px){
  .mobile-nav{
    display:flex !important;
  }
}



/* ===== v4 mobile fix: show exactly one card on mobile ===== */
.mobile-nav{
  display:none !important;
}

@media (max-width: 760px){
  .mobile-nav{
    display:flex !important;
  }

  .stage{
    display:block;
    overflow:visible;
    transform:none !important;
  }

  .butt-card{
    display:none;
    width:100%;
    min-width:0;
    padding:0 2px;
  }

  .butt-card.is-mobile-active{
    display:block;
  }

  .butt-button img{
    max-height:54vh;
    object-fit:cover;
  }

  .drop-zone{
    min-height:250px;
  }
}


.wisdom-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 0 10px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff8f3;
  color:#8d6a61;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:none;
}