/*
==================================
FEATURED CODE CHALLENGE
==================================
*/


.dw-code-feature-box{


display:grid;


grid-template-columns:

1fr 1fr;


gap:

60px;


background:

linear-gradient(

135deg,

#081120,

#102d55

);


padding:

70px;


border-radius:

40px;


color:white;


align-items:center;


}





.dw-code-content h2{


color:white;


font-size:

clamp(

2rem,

4vw,

3.5rem

);


margin-bottom:

25px;


}


.dw-code-content{
    padding:10px;
}

.dw-code-content p{


color:

rgba(255,255,255,.8);


margin-bottom:

35px;


}




.dw-code-content .section-label{


color:

var(--dw-accent);


}




.dw-challenge-meta{


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:

20px;


margin:

35px 0;


}





.dw-challenge-meta div{


background:

rgba(255,255,255,.1);


padding:

20px;


border-radius:

20px;


}



.dw-challenge-meta span{


display:block;


font-size:

14px;


opacity:.7;


}



.dw-challenge-meta strong{


font-size:

22px;


}





.code-window{


background:

#000;


border-radius:

25px;


padding:

30px;


box-shadow:

0 30px 80px rgba(0,0,0,.4);


}





.code-top{


display:flex;


gap:

8px;


margin-bottom:

25px;


}



.code-top span{


width:

12px;


height:

12px;


border-radius:

50%;


background:

white;


}




.code-window pre{


color:

#00d9ff;


font-size:

18px;


}

/*
==================================
CODE LEADERBOARD
==================================
*/


.dw-leaderboard-table{


max-width:

900px;


margin:

auto;


background:white;


border-radius:

30px;


overflow:hidden;


box-shadow:

var(--dw-shadow);


}





.dw-leader-header{


display:grid;


grid-template-columns:

80px 1fr 150px 150px;


padding:

25px;


background:

var(--dw-dark);


color:white;


font-weight:700;


}





.dw-leader-row{


display:grid;


grid-template-columns:

80px 1fr 150px 150px;


padding:

25px;


border-bottom:

1px solid rgba(0,0,0,.08);


align-items:center;


transition:

var(--dw-transition);


}





.dw-leader-row:hover{


background:

var(--dw-light);


transform:

translateX(10px);


}




.dw-leader-row .rank{


font-weight:

800;


}




.dw-leader-row .points{


font-weight:

800;


color:

var(--dw-secondary);


}

/*
==================================
CHALLENGE CATEGORIES
==================================
*/


.dw-category-grid{


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:

25px;


}





.dw-category-card{


background:white;


padding:

35px;


border-radius:

30px;


box-shadow:

var(--dw-shadow);


transition:

var(--dw-transition);


position:relative;


overflow:hidden;


}





.dw-category-card:hover{


transform:

translateY(-10px);


}





.dw-category-icon{


width:

70px;


height:

70px;


display:flex;


align-items:center;


justify-content:center;


background:

var(--dw-light);


border-radius:

20px;


font-size:

35px;


margin-bottom:

25px;


}





.dw-category-card h3{


margin-bottom:

15px;


}





.dw-category-card a{


font-weight:

700;


color:

var(--dw-secondary);


}

/*
==================================
CODE EDITOR
==================================
*/


.dw-editor-wrapper{


display:grid;


grid-template-columns:

300px 1fr;


gap:

30px;


background:

#081120;


padding:

35px;


border-radius:

35px;


color:white;


}





.dw-editor-sidebar{


background:

rgba(255,255,255,.08);


padding:

30px;


border-radius:

25px;


}




.editor-tabs{


display:flex;


flex-direction:

column;


gap:

12px;


margin-top:

30px;


}





.editor-tabs button{


padding:

15px;


border:none;


border-radius:

15px;


cursor:pointer;


text-align:left;


}





.editor-tabs .active{


background:

var(--dw-secondary);


color:white;


}





.dw-editor-window{


background:

#000;


border-radius:

25px;


overflow:hidden;


}





.editor-top{


display:flex;


justify-content:space-between;


align-items:center;


padding:

20px;


background:

rgba(255,255,255,.08);


}





.editor-buttons{


display:flex;


gap:

8px;


}





.editor-buttons span{


width:

12px;


height:

12px;


border-radius:

50%;


background:white;


}





.run-button{


border:none;


background:

var(--dw-accent);


padding:

12px 25px;


border-radius:

30px;


font-weight:

700;


cursor:pointer;


}





.editor-code{


padding:

35px;


font-size:

18px;


line-height:

1.8;


color:

#00e5ff;


}

/*
==================================
BADGES
==================================
*/


.dw-badges-grid{


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:

25px;


}





.dw-badge-card{


background:white;


padding:

35px 25px;


text-align:center;


border-radius:

30px;


box-shadow:

var(--dw-shadow);


transition:

var(--dw-transition);


}





.dw-badge-card:hover{


transform:

translateY(-10px);


}





.dw-badge-icon{


width:

90px;


height:

90px;


margin:

0 auto 25px;


border-radius:

50%;


display:flex;


align-items:center;


justify-content:center;


font-size:

45px;


background:

var(--dw-light);


}





.dw-badge-card h3{


margin-bottom:

15px;


}





.dw-badge-card p{


font-size:

15px;


}

/*
==================================
CHALLENGE TIMELINE
==================================
*/


.dw-timeline{


max-width:

900px;


margin:

auto;


position:relative;


}





.dw-timeline::before{


content:"";


position:absolute;


left:

35px;


top:

0;


height:

100%;


width:

3px;


background:

linear-gradient(

var(--dw-secondary),

var(--dw-accent)

);


}





.dw-timeline-item{


display:flex;


gap:

35px;


margin-bottom:

50px;


position:relative;


}





.dw-timeline-number{


width:

70px;


height:

70px;


border-radius:

50%;


background:

var(--dw-dark);


color:white;


display:flex;


align-items:center;


justify-content:center;


font-weight:

800;


z-index:

2;


flex-shrink:0;


}





.dw-timeline-content{


background:white;


padding:

30px;


border-radius:

25px;


box-shadow:

var(--dw-shadow);


flex:1;


}





.dw-timeline-content h3{


margin-bottom:

15px;


}





.dw-timeline-content span{


display:inline-block;


margin-top:

15px;


font-weight:

700;


color:

var(--dw-secondary);


}


/*
==================================
CODE STATISTICS
==================================
*/


.dw-code-stats-grid{


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:

25px;


}





.dw-code-stat-card{


background:white;


padding:

35px;


border-radius:

30px;


text-align:center;


box-shadow:

var(--dw-shadow);


transition:

var(--dw-transition);


}





.dw-code-stat-card:hover{


transform:

translateY(-10px);


}





.dw-stat-icon{


font-size:

40px;


margin-bottom:

20px;


}





.dw-code-stat-card h3{


font-size:

45px;


margin-bottom:

10px;


color:

var(--dw-secondary);


}





.dw-code-stat-card p{


font-weight:

600;


}

/*
==================================
WINNERS SHOWCASE
==================================
*/


.dw-winners-grid{


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:

30px;


}





.dw-winner-card{


background:white;


padding:

40px 30px;


text-align:center;


border-radius:

35px;


box-shadow:

var(--dw-shadow);


transition:

var(--dw-transition);


}





.dw-winner-card:hover{


transform:

translateY(-10px);


}





.dw-winner-avatar{


width:

90px;


height:

90px;


margin:

0 auto 25px;


border-radius:

50%;


display:flex;


align-items:center;


justify-content:center;


background:

var(--dw-light);


font-size:

45px;


}





.dw-winner-card h3{


margin-bottom:

10px;


}





.dw-winner-card span{


color:

var(--dw-secondary);


font-weight:

700;


}





.dw-winning-project{


margin-top:

25px;


padding:

15px;


border-radius:

15px;


background:

var(--dw-light);


font-weight:

600;


}

/*
==================================
CODE CHALLENGE CTA
==================================
*/


.dw-code-cta-box{


background:

linear-gradient(

135deg,

#081120,

#163d70

);


padding:

70px;


border-radius:

40px;


color:white;


display:flex;


justify-content:space-between;


align-items:center;


overflow:hidden;


position:relative;


}





.dw-code-cta-content{


max-width:

700px;


}





.dw-code-cta-content h2{


color:white;


font-size:

clamp(

2rem,

4vw,

3rem

);


margin-bottom:

20px;


}





.dw-code-cta-content p{


color:

rgba(255,255,255,.8);


margin-bottom:

35px;


}





.dw-code-cta .section-label{


color:

var(--dw-accent);


}





.dw-code-cta-buttons{


display:flex;


gap:

20px;


}





.floating-code{


font-size:

120px;


font-weight:

900;


opacity:

.15;


animation:

floating 4s infinite;


}