:root { --yellow: #FFC522; --red: #EE3F35; }
/* Buttons, panels */
.btn-wood { background: linear-gradient(#ffcc55,#f0b90b); box-shadow: 0 4px 0 #8c280f, inset 0 1px 0 #fff5; border: 2px solid #000; }
.btn-wood:active { transform: translateY(1px); box-shadow: 0 3px 0 #8c280f, inset 0 1px 0 #fff5; }
.panel { background: #fff3d6; border: 4px solid #1d150f; box-shadow: 0 10px 0 #1d150f33; }
.label-board { background: #3a2826; color: #c7ff77; border: 4px solid #1d150f; box-shadow: 0 8px 0 #1d150f33; }

/* Background stacks */
:root{
  --grad-yellow: radial-gradient(800px 400px at 80% -10%, rgba(255,220,100,.25), transparent 60%), linear-gradient(180deg,#FCD34D 0%, #f59e0b 100%);
  --grad-dark:   radial-gradient(800px 400px at 80% -10%, rgba(255,220,100,.12), transparent 60%), linear-gradient(180deg,#2b1f1e 0%, #1b1413 100%);
}
/* Adaptive BGs: first layer = your image, second = gradient. Control with CSS vars: --bg-x, --bg-y, --bg-size */
.bg-hero{
  background-image: url('bg1.png'), var(--grad-yellow);
  background-size: var(--bg-size, cover), auto;
  background-position: var(--bg-x, center) var(--bg-y, center), center;
  background-repeat: no-repeat, no-repeat;
}
.bg-about{
  background-image: url('bg2.png'), var(--grad-yellow);
  background-size: var(--bg-size, cover), auto;
  background-position: var(--bg-x, center) var(--bg-y, center), center;
  background-repeat: no-repeat, no-repeat;
}
.bg-nft{
  background-image: url('bg3.svg'), var(--grad-yellow);
  background-size: var(--bg-size, cover), auto;
  background-position: var(--bg-x, center) var(--bg-y, center), center;
  background-repeat: no-repeat, no-repeat;
}
.bg-socials{
  background-image: url('bg3.png'), var(--grad-dark);
  background-size: var(--bg-size, cover), auto;
  background-position: var(--bg-x, center) var(--bg-y, center), center;
  background-repeat: no-repeat, no-repeat;
}
/* Optional mobile alt images */
@media (max-width: 640px){
  .m-alt.bg-hero{background-image: url('assets/bg-hero-mobile.png'), var(--grad-yellow);} 
  .m-alt.bg-about{background-image: url('assets/bg-about-mobile.png'), var(--grad-yellow);} 
  .m-alt.bg-nft{background-image: url('assets/bg-nft-mobile.png'), var(--grad-yellow);} 
  .m-alt.bg-socials{background-image: url('assets/bg-socials-mobile.png'), var(--grad-dark);} 
}

/* Cards */
.card { background: linear-gradient(180deg,#f2d38a 0%, #d6a74a 100%); border: 4px solid #1f140c; box-shadow: 0 12px 0 #1f140c33; }

/* Candles */
.candles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.candle{position:absolute;right:var(--r,-12vw);bottom:var(--b,-12vh);opacity:var(--o,.9);filter:blur(var(--blur,0px));
  width:var(--w,180px);height:auto;transform:translate3d(0,0,0) rotate(var(--rot,-10deg));
  animation:flyDiag var(--dur,18s) linear var(--delay,0s) infinite;}
@keyframes flyDiag{from{transform:translate3d(0,0,0) rotate(var(--rot,-10deg)) scale(var(--scale,1));}
  to{transform:translate3d(-150vw,-150vh,0) rotate(var(--rotEnd,-12deg)) scale(var(--scale,1));}}
@media (prefers-reduced-motion: reduce){.candle{animation:none;}}
.rocket{display:none!important;}

/* PNG button bounce */
.btn-img{display:inline-block;}
.btn-img img{width:220px;max-width:70vw;height:auto;animation:btnBounce 2.5s ease-in-out infinite;}
@keyframes btnBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}

/* Social icon buttons as PNG */
.soc a{display:inline-flex;align-items:center;justify-content:center}
.soc img{height:44px;width:auto;display:block;transition:transform .2s ease}
.soc a:hover img{transform:scale(1.06)}
@media (max-width:640px){.soc img{height:36px}.candle{width:calc(var(--w,180px)*.7)}}
/* ===== Marquee (безкінечна, безшовна) ===== */
@keyframes marquee {
  0%   { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-50%,0,0); } /* рівно ширина першої копії */
}

/* доріжка: ширина по контенту + анімація */
.marquee-track{
  width: max-content;
  animation: marquee 19s linear infinite;
  will-change: transform;
}

/* сумісність зі старим класом, якщо десь лишився */
.animate-marquee{
  animation: marquee 12s linear infinite;
}

/* модифікатори швидкості (за бажанням) */
.marquee-track.slower{ animation-duration: 14s; }
.marquee-track.faster{ animation-duration: 7s; }

/* пауза при наведенні (опціонально) */
/* .marquee-track:hover { animation-play-state: paused; } */

/* повага до системної настройки "зменшити анімації" */
@media (prefers-reduced-motion: reduce){
  .marquee-track,
  .animate-marquee{ animation: none; }
}