/* Hoppiez shared styles for subpages (bunnies, labubu). index.html keeps its own inline CSS. */
:root{
  --blush:#FFEFF5;--blush-deep:#FFD9E8;--candy:#FF7BAC;--candy-dark:#F25590;
  --candy-deep:#D8336F;--berry:#7A3B55;--berry-soft:#9b6a80;--cream:#FFFBF7;
  --gold:#F5C56B;--shadow-pink:0 18px 50px -12px rgba(242,85,144,.35);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip;}
body{font-family:'Quicksand',sans-serif;background:var(--blush);color:var(--berry);overflow-x:hidden;overflow-x:clip;padding-top:88px;}
h1,h2,h3{font-family:'Baloo 2',cursive;}
img{user-select:none;-webkit-user-drag:none;}
:focus-visible{outline:3px solid var(--candy-dark);outline-offset:3px;border-radius:8px;}

/* ambient blobs */
.bg-blobs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict;}
.blob{position:absolute;border-radius:50%;filter:blur(55px);opacity:.5;}
.blob.b1{width:55vw;height:55vw;background:#FFD3E4;top:-18vw;left:-14vw;}
.blob.b2{width:42vw;height:42vw;background:#EBDDFF;top:30vh;right:-16vw;}
.blob.b3{width:48vw;height:48vw;background:#FFE9D6;bottom:-20vw;left:18vw;}

/* ---------- site nav ---------- */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:center;padding:13px 16px;
  border-bottom:2px solid rgba(255,255,255,.9);box-shadow:0 10px 30px -18px rgba(242,85,144,.4);
}
.site-nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,239,245,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.nav-toggle{display:none;}
.nav-links{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;}
.nav-links::-webkit-scrollbar{display:none;}
.nav-links a{
  font-family:'Baloo 2',cursive;font-weight:700;font-size:1.12rem;color:var(--berry);
  text-decoration:none;padding:11px 18px;border-radius:99px;white-space:nowrap;transition:background .2s,color .2s;
}
.nav-links a:hover{background:#fff;color:var(--candy-dark);}
.nav-links a[aria-current="page"]{background:#fff;color:var(--candy-dark);box-shadow:0 4px 12px -6px rgba(242,85,144,.4);}
.nav-actions{position:absolute;right:14px;top:50%;transform:translateY(-50%);display:flex;gap:10px;align-items:center;}
.nav-cta{
  font-family:'Baloo 2',cursive;font-weight:800;font-size:1rem;text-decoration:none;
  background:var(--candy);color:#fff;border:2px solid #fff;padding:12px 22px;border-radius:99px;
  box-shadow:0 5px 0 var(--candy-deep), 0 12px 26px -12px rgba(242,85,144,.55);
  transition:transform .15s, box-shadow .15s;white-space:nowrap;
}
.nav-cta:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--candy-deep), 0 9px 20px -12px rgba(242,85,144,.5);}
.lang-switch{
  display:flex;align-items:center;gap:6px;white-space:nowrap;
  font-family:'Baloo 2',cursive;font-weight:800;font-size:1rem;
  background:var(--candy);color:#fff;border:2px solid #fff;padding:12px 15px;border-radius:99px;
  box-shadow:0 5px 0 var(--candy-deep), 0 12px 26px -12px rgba(242,85,144,.55);
}
.lang-switch a{color:#ffc9dd;text-decoration:none;transition:color .15s;}
.lang-switch a:hover{color:#fff;}
.lang-switch a[aria-current="true"]{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.lang-switch span{opacity:.55;}
@media(max-width:960px){
  .site-nav{justify-content:flex-start;padding-right:240px;}
  .nav-toggle{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:14px 12px;border-radius:14px;}
  .nav-toggle span{display:block;width:25px;height:3.5px;border-radius:99px;background:var(--candy-dark);}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:4px;overflow:visible;
    background:rgba(255,239,245,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    padding:12px 16px 16px;border-bottom:2px solid #fff;
    box-shadow:0 22px 34px -18px rgba(242,85,144,.45);
  }
  #navToggle:checked ~ .nav-links{display:flex;}
  .nav-links a{font-size:1.1rem;padding:13px 18px;}
  .nav-cta{font-size:.85rem;padding:10px 14px;}
  .lang-switch{font-size:.85rem;padding:9px 11px;gap:4px;}
}

/* ---------- page scaffold ---------- */
main.page{position:relative;z-index:1;max-width:1020px;margin:0 auto;padding:24px 20px 48px;}
main.page a{color:var(--candy-dark);}
main.page a.btn-primary{color:#fff;}
.crumbs{font-size:.85rem;font-weight:700;color:var(--berry-soft);margin-bottom:26px;}
.crumbs a{color:var(--candy-dark);text-decoration:none;}
.crumbs a:hover{text-decoration:underline;}
.crumbs span{margin:0 6px;color:#d8a9bd;}
.page-head{text-align:center;max-width:680px;margin:0 auto 28px;}
.page-head h1{font-size:clamp(1.9rem,4.6vw,2.9rem);font-weight:800;line-height:1.14;}
.page-head h1 .pink{color:var(--candy-dark);}
.page-head p.lead{margin-top:14px;font-weight:600;color:var(--berry-soft);font-size:1.06rem;line-height:1.6;}
section.block{padding:26px 0 0;}
section.block h2{font-size:clamp(1.45rem,3.4vw,2rem);font-weight:800;text-align:center;margin-bottom:16px;}

/* ---------- panels ---------- */
.panel{
  background:rgba(255,255,255,.92);border:2px solid #fff;border-radius:28px;
  padding:30px 28px;box-shadow:0 14px 34px -16px rgba(242,85,144,.3);
}
.panel p{font-weight:600;color:var(--berry-soft);line-height:1.65;font-size:.98rem;}
.panel p + p{margin-top:12px;}
.panel a{color:var(--candy-dark);}

/* ---------- buttons ---------- */
.btn-primary{
  display:inline-block;font-family:'Baloo 2',cursive;font-weight:800;font-size:1.08rem;text-decoration:none;
  background:linear-gradient(160deg,#FF8FB8,var(--candy-dark));color:#fff;
  padding:16px 32px;border-radius:99px;border:none;cursor:pointer;
  box-shadow:0 6px 0 var(--candy-deep), 0 18px 34px -14px rgba(242,85,144,.6);
  transition:transform .15s, box-shadow .15s;
}
.btn-primary:hover{transform:translateY(2px);box-shadow:0 4px 0 var(--candy-deep), 0 14px 26px -14px rgba(242,85,144,.55);}
.btn-ghost{
  display:inline-block;font-family:'Baloo 2',cursive;font-weight:700;font-size:1.05rem;text-decoration:none;
  background:#fff;color:var(--candy-dark);padding:16px 28px;border-radius:99px;border:2px solid var(--blush-deep);
  transition:transform .15s, background .2s;
}
.btn-ghost:hover{transform:translateY(-2px);background:var(--blush-deep);}

/* ---------- rarity tiers ---------- */
.tier{display:inline-block;font-family:'Baloo 2',cursive;font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 14px;border-radius:99px;}
.t-ultra{background:linear-gradient(90deg,#FFE9B5,#FFD56E);color:#7a5a00;}
.t-rare{background:linear-gradient(90deg,#E7D6FF,#C9A6F2);color:#5b3a87;}
.t-unc{background:linear-gradient(90deg,#D9E9FF,#A9C9F0);color:#2f4f7a;}
.t-com{background:linear-gradient(90deg,#D9F2DF,#A9DFB8);color:#2f6e44;}

/* ---------- bunny hero ---------- */
.bunny-hero{display:grid;grid-template-columns:minmax(240px,1fr) 1.25fr;gap:38px;align-items:center;margin-bottom:14px;}
@media(max-width:760px){.bunny-hero{grid-template-columns:1fr;text-align:center;}}
.bunny-hero .pic img{width:min(360px,80vw);height:auto;filter:drop-shadow(0 0 20px rgba(255,182,213,.8)) drop-shadow(0 18px 26px rgba(122,59,85,.18));animation:heroFloat 5s ease-in-out infinite;}
@keyframes heroFloat{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-12px) rotate(1.5deg);}}
.bunny-hero .pic{text-align:center;}
.bunny-hero h1{font-size:clamp(2.1rem,5.5vw,3.2rem);font-weight:800;line-height:1.08;}
.bunny-hero .tagline{margin-top:10px;font-weight:600;color:var(--berry-soft);font-size:1.08rem;line-height:1.6;}
.badge-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px;}
@media(max-width:760px){.badge-row{justify-content:center;}}
.odds-pill{display:inline-block;font-family:'Baloo 2',cursive;font-weight:700;font-size:.85rem;background:#fff;color:var(--candy-dark);border:2px dashed var(--candy);border-radius:99px;padding:6px 16px;}

/* ---------- vitals ---------- */
.vitals{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 26px;}
.vitals div{padding:13px 4px;border-bottom:2px dashed var(--blush-deep);}
.vitals dt{font-family:'Baloo 2',cursive;font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--candy-dark);}
.vitals dd{font-weight:700;color:var(--berry);margin-top:3px;font-size:.98rem;}

/* ---------- warren grid (other bunnies) ---------- */
.warren-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1000px;margin:0 auto;}
@media(max-width:820px){.warren-grid{grid-template-columns:repeat(2,1fr);}}
.warren-card{
  display:block;text-decoration:none;text-align:center;
  background:linear-gradient(170deg,#FFF3F8,#FFE2EE);border:2px solid #fff;border-radius:22px;
  padding:16px 10px 14px;box-shadow:0 10px 26px -16px rgba(242,85,144,.3);
  transition:transform .3s cubic-bezier(.2,1.3,.4,1), box-shadow .3s;
}
.warren-card:hover{transform:translateY(-6px) rotate(-2deg);box-shadow:0 20px 36px -16px rgba(242,85,144,.45);}
.warren-card img{width:72%;height:auto;filter:drop-shadow(0 8px 12px rgba(122,59,85,.16));}
.warren-card b{display:block;font-family:'Baloo 2',cursive;font-weight:700;color:var(--candy-dark);font-size:1rem;margin-top:8px;}
.warren-card .tier{margin-top:6px;font-size:.66rem;padding:4px 12px;}
.warren-card small{display:block;margin-top:6px;font-weight:700;color:var(--berry-soft);font-size:.76rem;}

/* ---------- comparison table ---------- */
.table-wrap{overflow-x:auto;border-radius:24px;border:2px solid #fff;box-shadow:0 14px 34px -16px rgba(242,85,144,.3);background:rgba(255,255,255,.94);}
table.compare{width:100%;border-collapse:collapse;min-width:560px;}
table.compare th,table.compare td{padding:14px 18px;text-align:left;font-size:.94rem;line-height:1.5;}
table.compare thead th{font-family:'Baloo 2',cursive;font-weight:800;font-size:.98rem;background:linear-gradient(90deg,var(--candy),var(--candy-dark));color:#fff;}
table.compare thead th:first-child{background:transparent;color:var(--berry-soft);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;}
table.compare thead{border-radius:0;}
table.compare tbody th{font-weight:700;color:var(--berry);background:rgba(255,239,245,.7);font-size:.88rem;white-space:nowrap;}
table.compare tbody td{font-weight:600;color:var(--berry-soft);border-top:2px dashed var(--blush-deep);}
table.compare tbody th{border-top:2px dashed var(--blush-deep);}
table.compare td.hop{color:var(--berry);}

/* ---------- faq ---------- */
.faq{max-width:680px;margin:0 auto;}
.faq details{background:rgba(255,255,255,.9);border:2px solid #fff;border-radius:20px;margin-bottom:12px;box-shadow:0 10px 26px -18px rgba(242,85,144,.35);overflow:hidden;}
.faq summary{cursor:pointer;list-style:none;font-family:'Baloo 2',cursive;font-weight:700;font-size:1.05rem;color:var(--berry);padding:18px 22px;position:relative;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;font-size:1.4rem;color:var(--candy-dark);transition:rotate .25s;}
.faq details[open] summary::after{rotate:45deg;}
.faq details p{padding:0 22px 18px;font-weight:600;color:var(--berry-soft);line-height:1.6;font-size:.95rem;}
.faq a{color:var(--candy-dark);}

/* ---------- CTA strip ---------- */
.cta-strip{text-align:center;margin-top:30px;}
.cta-strip .wrap{max-width:560px;margin:0 auto;background:rgba(255,255,255,.9);border:2px solid #fff;border-radius:30px;padding:40px 28px;box-shadow:0 16px 40px -18px rgba(242,85,144,.35);}
.cta-strip h2{font-size:1.6rem;font-weight:800;}
.cta-strip p{margin:10px 0 20px;font-weight:600;color:var(--berry-soft);}
.cta-strip .ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}

/* ---------- footer ---------- */
footer{position:relative;z-index:1;background:linear-gradient(160deg,var(--candy),var(--candy-dark));color:#fff;border-radius:44px 44px 0 0;padding:44px 24px 26px;text-align:center;box-shadow:0 -16px 40px -20px rgba(242,85,144,.6);margin-top:40px;}
footer::before{content:"";position:absolute;inset:0;border-radius:44px 44px 0 0;background:radial-gradient(rgba(255,255,255,.13) 1.5px, transparent 1.6px) 0 0/26px 26px;pointer-events:none;}
footer .flogo{width:190px;height:auto;background:#fff;border-radius:26px;padding:10px 18px;box-shadow:0 10px 26px -10px rgba(122,29,64,.4);}
footer p{font-weight:600;max-width:430px;margin:16px auto 20px;color:#ffe2ee;font-size:.95rem;}
footer nav{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin:8px auto 22px;max-width:640px;}
footer nav a{color:#ffe2ee;text-decoration:none;font-weight:600;font-size:.88rem;}
footer nav a:hover{color:#fff;text-decoration:underline;}
footer small{display:block;color:#ffd0e2;font-weight:600;}
footer .fine{font-size:.72rem;color:#ffc7dc;max-width:560px;margin:14px auto 0;line-height:1.6;font-weight:600;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.1s !important;}
  html{scroll-behavior:auto;}
  .bg-blobs{display:none;}
}
@media (max-width:480px){
  .bg-blobs{opacity:.3;}
  .blob{filter:blur(30px);}
}