:root{
--accent:#c0914a;
--accent-alt:#f2bd71;
--accent-grad:linear-gradient(92deg,#c0914a 0%,#e4b368 55%,#8a6736 100%);
--bg-card:#262626;
--bg-card-alt:#1f1f1f;
--radius-lg:22px;
--transition:.55s cubic-bezier(.8,.05,.2,1);
--shadow:0 6px 18px -4px rgba(0,0,0,.55),0 2px 4px -1px rgba(0,0,0,.4);
--shadow-hover:0 16px 38px -8px rgba(0,0,0,.7),0 0 0 1px #c0914a55;
--progress-bg:#2c2c2c;
--progress-fill:linear-gradient(90deg,#c0914a,#f3c778,#8d6b30);
--danger:#c74444;
--fs-xxs:0.75rem;
--fs-xs:0.62rem;
--fs-s:1rem;
--fs-base:1.125rem;
--fs-title:clamp(1.5rem,3vw,2rem);
}
html,body{overscroll-behavior-x:none}
body{
overflow-x:hidden;
font-family:'Poppins',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
color:#ddd;
margin:0;
}
.no-select,
.no-select *{
-webkit-user-select:none;
user-select:none;
-webkit-touch-callout:none;
-webkit-tap-highlight-color:transparent;
}
.carousel-nav,
.btn-sm{
-webkit-user-select:none;
user-select:none;
-webkit-tap-highlight-color:transparent;
text-decoration:none;
}
.carousel-nav:focus,
.btn-sm:focus{
-webkit-user-select:none;
user-select:none;
}
.carousel-nav::selection,
.btn-sm::selection,
.carousel-nav *::selection,
.btn-sm *::selection{
background:transparent;
}
.btn-sm:focus:not(:focus-visible),
.carousel-nav:focus:not(:focus-visible){
outline:none;
}
.active-raffles-section{
margin:36px auto 58px;
max-width:1320px;
padding:0 18px;
}
.active-raffles-section .section-title{
font-size:clamp(1.15rem,1.05rem + 1vw,1.7rem);
font-weight:800;
color:#fff;
display:flex;
gap:10px;
align-items:center;
letter-spacing:.6px;
text-transform:uppercase;
margin:0 0 18px;
}
.active-raffles-section .section-title i{
color:var(--accent-alt);
filter:drop-shadow(0 0 5px #7d190155);
}
.carousel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  max-height: 80vh;
  overflow-y: scroll;
  gap: 20px;
  scroll-behavior: smooth; 
}
.carousel::-webkit-scrollbar {
  display: none; 
}
.carousel *{
scrollbar-width: none;
-webkit-user-select:none;
user-select:none;
}
.carousel-viewport{
position:relative;
overflow:hidden; 
overflow-y: auto;
width:100%;
border-radius:28px;
padding:10px 4px 24px;
isolation:isolate;
scroll-snap-type:none;
}
.carousel-track {
  display: flex;
  flex-direction: column; 
  gap: 20px;
  width: 100%;
}
.carousel-track>.raffle-card{
flex:0 0 100%;
display:flex;
justify-content:center;
background:transparent;
border:none;
box-shadow:none;
padding:0;
position:relative;
scroll-snap-align:center;
}
.raffle-card-inner{
width:clamp(260px,50vw,420px);
background:linear-gradient(165deg,var(--bg-card) 0%,var(--bg-card-alt) 100%);
border-radius:var(--radius-lg);
position:relative;
overflow:hidden;
border:1px solid #343434;
box-shadow:var(--shadow);
display:flex;
flex-direction:column;
transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition),filter var(--transition);
isolation:isolate;
animation:scaleIn .5s ease;
}
@media (hover:hover){
.raffle-card-inner:hover{
transform:translateY(-6px);
box-shadow:var(--shadow-hover);
border-color:#3d3d3d;
}
}
.raffle-card-image{
position:relative;
width:100%;
aspect-ratio:var(--ar,4/3);
background:#111;
overflow:hidden;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
--blur-opacity:.55;
}
.raffle-card-image img.raffle-img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .7s ease, opacity .45s ease;
opacity:0;
transform:scale(1.02);
backface-visibility:hidden;
-webkit-user-drag:none;
user-drag:none;
pointer-events:none;
}
.raffle-card-image img.raffle-img.ready{
opacity:1;
transform:none;
}
.raffle-card-image.is-horizontal img.raffle-img{
object-fit:cover;
}
.raffle-card-image.is-vertical img.raffle-img{
object-fit:contain;
width:100%;
height:100%;
z-index:1;
position:relative;
}
.raffle-card-image.is-vertical::before{
content:"";
position:absolute;
inset:0;
background:var(--bg-blur,#111) center/cover no-repeat;
filter:blur(22px) brightness(var(--blur-opacity));
transform:scale(1.18);
z-index:0;
transition:filter .6s;
}
@media (hover:hover){
.raffle-card-inner:hover .raffle-card-image.is-horizontal img.raffle-img{
transform:scale(1.08);
}
.raffle-card-inner:hover .raffle-card-image.is-vertical::before{
filter:blur(26px) brightness(.6);
}
}
.ribbon-free{
position:absolute;
top:16px;
left:-42px;
background:linear-gradient(120deg,#2f7d32,#4ebe5a);
color:#fff;
font-size:.6rem;
font-weight:800;
letter-spacing:1px;
padding:7px 54px 6px;
transform:rotate(-32deg);
text-transform:uppercase;
box-shadow:0 4px 10px -3px rgba(0,0,0,.55);
z-index:6;
}
.soldout-stamp{
position:absolute;
inset:0;
background:linear-gradient(160deg,#460000d4,#000000cc);
display:flex;
align-items:center;
justify-content:center;
font-size:.9rem;
font-weight:800;
letter-spacing:2px;
color:#ffe1e1;
text-shadow:0 2px 4px #000;
z-index:8;
}
.raffle-card-body{
padding:18px 22px 24px;
display:flex;
flex-direction:column;
gap:16px;
flex:1;
min-height:190px;
}
.raffle-card-title{
margin:0;
font-size:var(--fs-title);
font-weight:700;
line-height:1.18;
color:#fff;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
min-height:3.6em;
}
.raffle-meta{
display:flex;
justify-content:space-between;
gap:14px;
flex-wrap:wrap;
align-items:center;
}
.meta-price{
background:#27231d;
color:#fff;
padding:7px 15px 6px;
font-size:var(--fs-s);
border-radius:16px;
display:inline-flex;
align-items:center;
gap:6px;
font-weight:700;
letter-spacing:.45px;
}
.meta-date{
background:#262626;
color:#bcbcbc;
padding:6px 14px 6px;
font-size:var(--fs-xs);
font-weight:600;
border-radius:999px;
display:inline-flex;
gap:6px;
align-items:center;
letter-spacing:.5px;
}
.meta-price i,
.meta-date i{
color:var(--accent);
font-size:.85em;
}
.progress.mini{
height:30px;
background:#222;
border-radius:18px;
position:relative;
overflow:hidden;
box-shadow:inset 0 0 0 1px #2e2e2e;
display:flex;
align-items:center;
justify-content:center;
}
.progress.mini .progress-bar{
position:absolute;
top:0;
left:0;
height:100%;
width:0%;
background:var(--progress-fill);
background-size:200% 100%;
animation:shimmer 5s linear infinite;
transition:width .6s ease;
}
.progress.mini .progress-text{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:center;
font-size:var(--fs-xs);
font-weight:800;
letter-spacing:.6px;
color:#fff;
text-shadow:0 1px 2px #000;
white-space:nowrap;
text-transform:uppercase;
}
@keyframes shimmer{
0%{background-position:0 50%}
50%{background-position:100% 50%}
100%{background-position:0 50%}
}
.raffle-actions{
display:flex;
gap:12px;
margin-top:2px;
}
.btn-sm{
flex:1;
background:var(--accent-grad);
color:#fff;
font-size:var(--fs-base);
font-weight:800;
letter-spacing:.65px;
text-transform:uppercase;
border:none;
border-radius:16px;
padding:13px 12px 12px;
cursor:pointer;
display:inline-flex;
gap:8px;
justify-content:center;
align-items:center;
position:relative;
overflow:hidden;
transition:.5s;
}
.btn-sm:hover{
filter:brightness(1.12);
transform:translateY(-3px);
}
.btn-sm:active{
transform:translateY(-1px) scale(.97);
}
.btn-sm.verify-btn{
flex:0 0 58px;
aspect-ratio:1/1;
background:#2d2d2d;
color:var(--accent);
}
.btn-sm.verify-btn:hover{
background:var(--accent);
color:#130e07;
}
.sold-label{
flex:1;
background:#5e2020;
color:#ffd7d7;
text-align:center;
font-size:var(--fs-xs);
font-weight:800;
letter-spacing:.7px;
padding:12px 6px 11px;
border-radius:16px;
border:1px solid #712c2c;
box-shadow:inset 0 0 0 1px #000;
text-transform:uppercase;
}
.carousel-nav{
position:absolute;
top:50%;
transform:translateY(-50%);
width:56px;
height:56px;
border-radius:50%;
background:linear-gradient(145deg,#1b1b1be6,#272727f2);
backdrop-filter:blur(4px);
border:1px solid #2c2c2c;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
color:var(--accent);
font-size:1.1rem;
z-index:30;
transition:.45s, transform .45s, opacity .45s;
box-shadow:0 10px 28px -10px rgba(0,0,0,.8);
}
.carousel-nav.prev{left:calc(-1 * var(--nav-gap));}
.carousel-nav.next{right:calc(-1 * var(--nav-gap));}
.carousel-nav:disabled{
opacity:.28;
cursor:default;
}
.carousel-nav:not(:disabled):hover{
background:linear-gradient(135deg,#2c0900,#1f1f1f);
color:#ffe7c4;
transform:translateY(-50%) scale(1.12);
}
.carousel-nav::after{
content:"";
position:absolute;
inset:-10px;
}
@media (hover:hover){
.carousel:not(:hover) .carousel-nav{opacity:.85;}
.carousel:hover .carousel-nav.prev{transform:translate(-4px,-50%) scale(1.12);}
.carousel:hover .carousel-nav.next{transform:translate(4px,-50%) scale(1.12);}
}
.carousel-nav:focus-visible,
.btn-sm:focus-visible{
outline:2px solid var(--accent);
outline-offset:2px;
}
@media (min-width:640px){
.carousel{min-height:480px;}
.raffle-card-inner{width:clamp(280px,56vw,420px);}
}
@media (min-width:900px){
.carousel-viewport{padding:14px 4px 30px;}
.carousel-track>.raffle-card{flex:0 0 66%;}
.raffle-card-inner{width:clamp(300px,46vw,420px);}
}
@media (min-width:1200px){
.carousel-track>.raffle-card{flex:0 0 52%;}
.raffle-card-inner{width:clamp(320px,40vw,420px);}
}
@media (max-width:900px){
.carousel{--nav-gap:clamp(24px,4.2vw,60px)}
.carousel-nav{width:52px;height:52px}
}
@media (max-width:700px){
.carousel{--nav-gap:8px}
.carousel-nav{width:48px;height:48px}
}
@media (max-width:480px){
.carousel-nav{width:42px;height:42px}
}
@media (max-width:360px){
.carousel-nav{width:38px;height:38px;font-size:.9rem}
}
@media (max-width:330px){
.carousel-nav{display:none}
}
@media (max-width:600px){
:root{
--fs-base:.72rem;
--fs-s:.64rem;
--fs-xs:.56rem;
--fs-xxs:.48rem;
}
.active-raffles-section{
margin:26px auto 44px;
padding:0 14px;
}
.carousel{
min-height:unset;
padding-top:2px;
}
.carousel-viewport{
border-radius:16px;
padding:0 8px 14px;
}
.raffle-card-image{aspect-ratio:var(--ar,4/3)}
.raffle-card-inner{
width:100%;
border-radius:16px;
padding-bottom:2px;
box-shadow:0 4px 12px -6px rgba(0,0,0,.5);
border:1px solid #2c2c2c;
}
.raffle-card-body{
padding:14px 14px 16px;
gap:10px;
min-height:auto;
}
.raffle-card-title{
font-size:clamp(.95rem,4.2vw,1.05rem);
-webkit-line-clamp:2;
min-height:2.4em;
}
.ribbon-free{
font-size:.5rem;
padding:5px 46px 5px;
top:12px;
left:-38px;
}
.meta-price,
.meta-date{
font-size:var(--fs-xs);
padding:5px 9px 5px;
letter-spacing:.3px;
border-radius:14px;
}
.meta-price{gap:4px}
.meta-date{gap:4px}
.progress.mini{
height:26px;
border-radius:14px;
}
.progress.mini .progress-text{
font-size:.52rem;
letter-spacing:.35px;
padding:0 8px;
}
.raffle-actions{
gap:8px;
margin-top:0;
}
.btn-sm{
font-size:.6rem;
padding:9px 9px 9px;
letter-spacing:.45px;
border-radius:14px;
}
.btn-sm.verify-btn{
flex:0 0 46px;
}
.sold-label{
font-size:.55rem;
padding:9px 4px 9px;
letter-spacing:.5px;
}
.carousel-nav{
backdrop-filter:blur(3px);
}
}
@media (max-width:480px){
.raffle-card-body{
padding:12px 12px 14px;
gap:8px;
}
.raffle-card-title{
font-size:clamp(.9rem,4.4vw,1rem);
-webkit-line-clamp:2;
}
.progress.mini{
height:24px;
}
.btn-sm{
font-size:.56rem;
padding:8px 8px 8px;
}
.btn-sm.verify-btn{
flex:0 0 42px;
}
}
@media (max-width:400px){
.active-raffles-section{
padding:0 10px;
}
.raffle-card-body{
padding:10px 11px 12px;
gap:7px;
}
.raffle-card-title{
font-size:clamp(.88rem,4.8vw,.96rem);
-webkit-line-clamp:2;
}
.meta-price,
.meta-date{
padding:4px 8px 4px;
font-size:.5rem;
}
.progress.mini{
height:22px;
}
.progress.mini .progress-text{
font-size:.48rem;
letter-spacing:.3px;
}
.btn-sm{
font-size:.52rem;
border-radius:12px;
}
.btn-sm.verify-btn{
flex:0 0 40px;
}
}
@media (max-width:360px){
.raffle-card-body{padding:9px 10px 11px}
.btn-sm{padding:7px 7px 7px;font-size:.5rem}
.progress.mini{height:20px}
}
@media (max-width:330px){
.raffle-card-title{-webkit-line-clamp:2}
}
@keyframes scaleIn{
from{transform:scale(.97);opacity:0}
to{transform:scale(1);opacity:1}
}
.carousel-nav:focus-visible,
.btn-sm:focus-visible{
outline:2px solid var(--accent);
outline-offset:2px;
}