body{

    margin:0;
    overflow-x:hidden;

    min-height:100vh;

    background:

    radial-gradient(circle at 20% 20%,#fff8b0 0 80px,transparent 81px),

    radial-gradient(circle at 80% 10%,#ffffff 0 60px,transparent 61px),

    radial-gradient(circle at 60% 80%,#b8f4ff 0 70px,transparent 71px),

    linear-gradient(180deg,#8fd3ff,#dff8ff);

}

/* ابرها */

.cloud{

position:absolute;

background:white;

border-radius:100px;

opacity:.8;

}

.cloud:before,
.cloud:after{

content:"";

position:absolute;

background:white;

border-radius:50%;

}

.cloud1{

width:150px;
height:50px;

top:60px;
right:40px;

animation:moveCloud 30s linear infinite;

}

.cloud1:before{

width:60px;
height:60px;

right:20px;
top:-25px;

}

.cloud1:after{

width:70px;
height:70px;

left:15px;
top:-35px;

}

.cloud2{

width:180px;
height:60px;

left:50px;

top:180px;

animation:moveCloud 40s linear infinite reverse;

}

.cloud2:before{

width:70px;
height:70px;

right:35px;

top:-30px;

}

.cloud2:after{

width:90px;
height:90px;

left:20px;

top:-45px;

}

@keyframes moveCloud{

0%{

transform:translateX(0);

}

50%{

transform:translateX(80px);

}

100%{

transform:translateX(0);

}

}

/* کارت */

.game-card{

background:white;

border-radius:35px;

box-shadow:0 15px 35px rgba(0,0,0,.15);

padding:25px;

}

/* امتیاز */

.score-board{

background:linear-gradient(90deg,#0ea5e9,#38bdf8);

color:white;

border-radius:20px;

padding:15px;

font-size:26px;

font-weight:bold;

box-shadow:0 8px 20px rgba(0,0,0,.15);

}

/* سوال */

.question{

font-size:34px;

font-weight:800;

color:#0f172a;

}

.question span{

display:block;

margin-top:15px;

font-size:50px;

color:#f97316;

}

/* ساعت */

.clock{

position:relative;

width:min(82vw,420px);

aspect-ratio:1;

margin:auto;

border-radius:50%;

background:
radial-gradient(circle at 30% 30%,#ffffff,#dbeafe);

border:14px solid #2563eb;

box-shadow:

0 18px 35px rgba(0,0,0,.25),

inset 0 8px 18px rgba(255,255,255,.9),

inset 0 -12px 20px rgba(0,0,0,.15);

overflow:hidden;

}

.clock::before{

content:"";

position:absolute;

inset:18px;

border-radius:50%;

background:

radial-gradient(circle,#ffffff,#eef8ff);

box-shadow:

inset 0 5px 12px rgba(255,255,255,.9),

inset 0 -8px 14px rgba(0,0,0,.08);

}

.clock::after{

content:"";

position:absolute;

width:96%;

height:96%;

left:2%;

top:2%;

border-radius:50%;

border:2px dashed rgba(37,99,235,.15);

pointer-events:none;

}

/* نقطه وسط */

.center-dot{

position:absolute;

width:24px;

height:24px;

background:

radial-gradient(circle,#fff,#ef4444);

border:4px solid white;

border-radius:50%;

left:50%;

top:50%;

transform:translate(-50%,-50%);

box-shadow:

0 0 12px rgba(239,68,68,.5);

z-index:100;

}


/* عقربه ها */

.hand{

position:absolute;

left:50%;

bottom:50%;

transform-origin:bottom center;

transition:transform .4s ease;

border-radius:20px;

}

.hour-hand{

width:10px;

height:28%;

background:linear-gradient(#1d4ed8,#60a5fa);

margin-left:-5px;

border-radius:30px;

box-shadow:

0 3px 8px rgba(0,0,0,.3);

z-index:10;

}



.minute-hand{

width:6px;

height:38%;

background:linear-gradient(#059669,#6ee7b7);

margin-left:-3px;

border-radius:30px;

box-shadow:

0 3px 8px rgba(0,0,0,.3);

z-index:9;

}

/* اعداد */

.number{

    position:absolute;

    width:38px;
    height:38px;

    display:flex;
    align-items:center;
    justify-content:center;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:#fff;

    font-size:22px;

    font-weight:700;

    color:#0f172a;

    box-shadow:0 2px 8px rgba(0,0,0,.15);

}


/* پیام */

.message{

font-size:28px;

font-weight:bold;

min-height:45px;

}

/* دکمه */

.big-btn{

font-size:24px;

font-weight:bold;

padding:15px;

border-radius:20px;

}

/* مرحله */

.stage{

font-size:28px;

font-weight:800;

color:#2563eb;

}

/* ستاره */

.star{

position:fixed;

font-size:28px;

pointer-events:none;

animation:explode 1s forwards;

z-index:9999;

}

@keyframes explode{

0%{

opacity:1;

transform:scale(.5);

}

100%{

opacity:0;

transform:

translateY(-180px)

rotate(360deg)

scale(2);

}

}

@media(max-width:768px){

.clock{

width:290px;
height:290px;

}

.question{

font-size:28px;

}

.question span{

font-size:42px;

}

}