body {
font-family: 'Amiri', serif;
background: #080812;
color: #f5ead8;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
position: relative;
overflow: hidden;
}
body::before {
content: '';
position: fixed;
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(201,168,76,0.08) 0%, transparent 70%);
top: 50%; left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.c { position: fixed; width: 80px; height: 80px; border-color: rgba(201,168,76,0.35); border-style: solid; }
.c.tl { top:16px; left:16px; border-width:2px 0 0 2px; }
.c.tr { top:16px; right:16px; border-width:2px 2px 0 0; }
.c.bl { bottom:16px; left:16px; border-width:0 0 2px 2px; }
.c.br { bottom:16px; right:16px; border-width:0 2px 2px 0; }
.star {
position: fixed;
border-radius: 50%;
background: #c9a84c;
animation: twinkle 3s ease-in-out infinite;
pointer-events: none;
}
@keyframes twinkle { 0%,100%{opacity:0.2} 50%{opacity:0.9} }
.card {
position: relative; z-index: 2;
display: flex; flex-direction: column;
align-items: center; gap: 22px;
width: 100%; max-width: 480px;
text-align: center;
}
.logo img {
height: 65px;
filter: drop-shadow(0 0 18px rgba(201,168,76,0.45));
}
.divider {
display: flex; align-items: center; gap: 10px; width: 100%;
}
.divider-line { flex:1; height:1px; background: linear-gradient(90deg, transparent, #8b6914, transparent); }
.divider-dot { width:7px; height:7px; background:#c9a84c; transform:rotate(45deg); box-shadow:0 0 10px #c9a84c; }
.tagline {
font-family: 'Scheherazade New', serif;
font-size: clamp(17px, 4vw, 22px);
color: #f0d080;
line-height: 1.8;
}
.tagline small {
display: block;
font-size: clamp(13px, 3vw, 16px);
color: rgba(245,234,216,0.55);
margin-top: 4px;
font-style: italic;
}
.drum-outer {
width: 240px; height: 240px;
border-radius: 50%;
padding: 4px;
background: conic-gradient(#c9a84c 0%, #8b6914 25%, #c9a84c 50%, #8b6914 75%, #c9a84c 100%);
animation: spinRing 12s linear infinite;
position: relative;
}
.drum-inner {
width: 100%; height: 100%;
border-radius: 50%;
background: radial-gradient(circle at 38% 32%, #1a1a30, #090910);
display: flex; align-items: center; justify-content: center;
border: 2px solid #1a1a30;
box-shadow: inset 0 0 50px rgba(0,0,0,0.7), 0 0 30px rgba(201,168,76,0.12);
position: relative;
}
.drum-inner::before {
content: '';
position: absolute; inset: 14px;
border-radius: 50%;
border: 1px solid rgba(201,168,76,0.18);
}
.drum-inner::after {
content: '';
position: absolute; inset: 26px;
border-radius: 50%;
border: 1px solid rgba(201,168,76,0.09);
}
@keyframes spinRing { to { transform: rotate(360deg); } }
#numBox {
font-size: 88px;
font-weight: 900;
font-family: Georgia, 'Times New Roman', serif;
background: linear-gradient(180deg, #fff8e1 0%, #c9a84c 55%, #8b6914 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
line-height: 1;
letter-spacing: -3px;
position: relative; z-index: 1;
user-select: none;
}
#numBox.winner {
animation: glow 0.6s ease-in-out infinite alternate;
}
@keyframes glow {
from { filter: drop-shadow(0 0 8px rgba(201,168,76,0.5)); }
to { filter: drop-shadow(0 0 30px rgba(201,168,76,1)); }
}
.progress-bar-wrap {
width: 240px; height: 6px;
background: rgba(255,255,255,0.07);
border-radius: 10px;
overflow: hidden;
margin-top: -8px;
}
.progress-bar-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #8b6914, #f0d080);
border-radius: 10px;
box-shadow: 0 0 8px #c9a84c;
}
#winnerBox {
display: none;
flex-direction: column;
align-items: center;
gap: 6px;
animation: popIn 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
#winnerBox.show { display: flex; }
@keyframes popIn { from{transform:scale(0.7);opacity:0} to{transform:scale(1);opacity:1} }
.winner-label {
font-family: 'Scheherazade New', serif;
font-size: clamp(18px, 4vw, 26px);
color: #f0d080;
text-shadow: 0 0 20px rgba(201,168,76,0.5);
}
.winner-big {
font-family: Georgia, serif;
font-size: clamp(52px, 12vw, 80px);
font-weight: 900;
background: linear-gradient(135deg, #fff 0%, #f0d080 40%, #8b6914 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
filter: drop-shadow(0 0 20px rgba(201,168,76,0.8));
}
.buttons { display: flex; flex-direction: column; gap: 12px; align-items: center; width: 100%; }
#btnStart {
padding: 16px 64px;
font-family: 'Scheherazade New', serif;
font-size: 22px;
font-weight: 700;
color: #080812;
background: linear-gradient(135deg, #f0d080, #c9a84c, #8b6914);
border: none;
border-radius: 60px;
cursor: pointer;
box-shadow: 0 4px 24px rgba(201,168,76,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
transition: transform 0.2s, box-shadow 0.2s;
position: relative; overflow: hidden;
}
#btnStart:hover:not(:disabled) {
transform: translateY(-3px);
box-shadow: 0 8px 32px rgba(201,168,76,0.65);
}
#btnStart:active:not(:disabled) { transform: scale(0.97); }
#btnStart:disabled { opacity: 0.5; cursor: not-allowed; }
#btnStart::after {
content: '';
position: absolute; top: 0; left: -80%;
width: 60%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
transform: skewX(-20deg);
animation: shimmer 2.5s infinite;
}
@keyframes shimmer { to { left: 140%; } }
#btnReset {
padding: 10px 36px;
font-family: 'Scheherazade New', serif;
font-size: 18px;
color: #c9a84c;
background: transparent;
border: 1px solid rgba(201,168,76,0.4);
border-radius: 50px;
cursor: pointer;
transition: all 0.3s;
display: none;
}
#btnReset.show { display: inline-block; }
#btnReset:hover { background: rgba(201,168,76,0.1); border-color: #c9a84c; }
.
display: flex; -items: center; gap: 8px;
.dot { width:8px; height:8px; border-radius:50%; background:#c9a84c; animation:pulse 2s infinite; }
.dot.green { background:#4caf50; box-shadow:0 0 8px #4caf50; animation:none; opacity:1; }
#confetti { position:fixed; inset:0; pointer-events:none; z-index:100; }
.flake {
position: absolute;
top: -20px;
animation: fall linear forwards;
}
@keyframes fall {
to { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}