﻿
body {

    margin: 0;

    overflow-x: hidden;

}


.cell {

    width: 88px;

    min-width: 88px;

    min-height: 160px;

    background: #111;

    border: 1px solid #333;

    padding: 10px;

    text-align: center;

    flex-shrink: 0;

    box-sizing: border-box;

}
.player-name{
    font-size:18px;
    line-height:1.1;
    word-break:break-word;
    overflow-wrap:break-word;
    white-space:normal;
    max-width:100%;
}

.player-img{
    width:54px;
    height:54px;
    object-fit:contain;
    margin:6px auto;
}

.team-name{
    font-size:12px;
    color:#00e5ff;
    margin-bottom:6px;
}

.player-meta{
    font-size:12px;
    color:#aaa;
    margin-top:6px;
}

.latest{
    border:2px solid #00ff99;
    box-shadow:0 0 14px #00ff99;
}

.current-pick-cell{
    border:2px solid red;
    box-shadow:0 0 14px red;
}
/*                */
.board {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 25px;

    width: fit-content;

    margin: 0 auto;

    padding-left: 20px;

    padding-right: 12px;

    box-sizing: border-box;

}

.round-row {

    display: flex;

    justify-content: flex-start;

    gap: 4px;

    width: fit-content;

    
    
}

.round-header {

    font-size: 20px;

    font-weight: 700;

    margin-bottom: 8px;

    text-align: center;

}

.board-scroll {

    width: 100%;

    overflow-x: auto;

    overflow-y: visible;

    padding-left: 18px;

    box-sizing: border-box;

}

.board-container {

    width: fit-content;

    margin: 0 auto;

    padding: 0 14px;

    box-sizing: border-box;

}        


}
.round {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    width: fit-content;

    margin: 0 auto;

}

/* =========================
TOP STATUS AREA
========================= */

.draft-status {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    margin: 20px auto 35px auto;

    gap: 6px;

}

/* ON THE CLOCK */
.onclock-team {

    font-size: 34px;

    font-weight: 700;

    color: #fff;

    line-height: 1.1;

}

/* TIMER */
.timer,
#timer {

    font-size: 56px;

    font-weight: 700;

    color: #00e5ff;

    line-height: 1;

    text-shadow: 0 0 10px rgba(0,229,255,.45);

}

/* STATUS LABELS */
.draft-meta {

    font-size: 15px;

    color: #aaa;

    line-height: 1.4;

}

/* HIGHLIGHT CURRENT PICK */
.current-pick-text {

    color: #ff4444;

    font-weight: 700;

}
.board-scroll{

    overflow-x:auto;

    overflow-y:visible;

    width:100%;

    padding-bottom:20px;

}
.draft-sticky-wrap{

    position: sticky;

    top: 0;

    z-index: 99999;

    background: #050505;

    padding-top: 10px;

    padding-bottom: 12px;

}
.player-result img,
.player-card img,
.search-player img {

    width: 70px;
    height: 70px;

    object-fit: cover;

    border-radius: 8px;

    display: block;

}
.search-player-img {

    width: 70px;
    height: 70px;

    object-fit: cover;

    border-radius: 10px;

    flex-shrink: 0;

}
.search-player-card {

    display: flex;

    align-items: center;

    gap: 12px;

}
.search-panel {

    position: sticky;

    top: 80px;

    z-index: 9999;

}
.player-results {

    position: absolute !important;

    top: calc(100% + 8px) !important;

    left: 0 !important;

    width: 100% !important;

    max-height: 500px !important;

    overflow-y: auto !important;

    background: #111 !important;

    border: 1px solid #333 !important;

    border-radius: 10px !important;

    box-shadow: 0 10px 30px rgba(0,0,0,.75) !important;

    z-index: 99999 !important;

    display: none;

}


@media (max-width: 768px) {

.board-scroll {

    width: 100% !important;

    overflow-x: auto !important;

    overflow-y: visible !important;

    -webkit-overflow-scrolling: touch !important;

}

.board {

    display: flex !important;

    flex-direction: row !important;

    align-items: flex-start !important;

    justify-content: flex-start !important;

    gap: 2px !important;

    width: max-content !important;

    margin: 0 !important;

    padding: 0 4px 20px 4px !important;

}

.round {

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    gap: 2px !important;

    margin: 0 !important;

    padding: 0 !important;

}

.round-header {

    display: block !important;

    width: 100% !important;

    margin: 0 0 6px 0 !important;

    padding: 0 !important;

    text-align: center !important;

    font-size: 16px !important;

    line-height: 1.1 !important;

    position: static !important;

}

.round-row {

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    gap: 4px !important;

    margin: 0 !important;

    padding: 0 !important;

}

.cell {

    width: 88px !important;

    min-width: 88px !important;

    min-height: 150px !important;

    padding: 6px !important;

    flex-shrink: 0 !important;

}

.player-name {

    font-size: 13px !important;

    line-height: 1.15 !important;

}

.player-img {

    width: 42px !important;

    height: 42px !important;

}

.team-name {

    font-size: 11px !important;

}

.player-meta {

    font-size: 11px !important;

}

.current-pick-cell {

    background: #2a0000 !important;

    box-shadow: 0 0 6px red !important;

}

.site-header {

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    right: 0 !important;

    z-index: 10001 !important;

    background: #050505 !important;

    padding: 6px 0 !important;

}

.draft-top {

    position: relative !important;

    z-index: 9999 !important;

    background: #000 !important;

    padding: 4px 0 !important;

}

.onclock {

    position: fixed !important;

    top: 145px !important;

    left: 0 !important;

    right: 0 !important;

    z-index: 9999 !important;

    background: #000 !important;

    padding: 4px 0 !important;

    text-align: center !important;

}

.onclock-team {

    font-size: 18px !important;

    line-height: 1 !important;

    margin-bottom: 2px !important;

}

#timer,
.timer {

    font-size: 40px !important;

    line-height: 1 !important;

    margin: 0 !important;

}

.mobile-menu-btn {

    position: relative !important;

    z-index: 10001 !important;

}

.site-title {

    font-size: 32px !important;

}

}








