@font-face {
    font-family: 'Radikal Bold';
    src: url('Assets/Font/radikal-bold.otf') format('opentype'),
         url('Assets/Font/NOOTYPE%20-%20RADIKAL%20BOLD.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Radikal';
    src: url('Assets/Font/radikal.otf') format('opentype'),
         url('Assets/Font/NOOTYPE%20-%20RADIKAL.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Big Noodle Titling';
    src: url('Assets/Font/big_noodle_titling.ttf') format('truetype');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background-color: transparent;
    font-family: 'Big Noodle Titling', 'Radikal Bold', sans-serif;
    color: #ffffff;
    user-select: none;
    -webkit-user-select: none;
}

.draft-container {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
}

/* Background overlay template */
.overlay-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    z-index: 10;
    pointer-events: none;
}

/* In-game / Camera Window Cutout */
.camera-window {
    position: absolute;
    left: 613px;
    top: 185px;
    width: 696px;
    height: 400px;
    z-index: 5;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.camera-placeholder {
    display: none;
}

/* ================== TEAM INFO & BARS ================== */
.side-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    z-index: 15;
    pointer-events: none;
}

/* Bans Circles (Top: 767px, exact 52px diameter matching template overlay holes) */
.bans-group {
    position: absolute;
    top: 767px;
    display: flex;
    gap: 19px;
    z-index: 20;
}

.blue-bans {
    left: 43px;
}

.red-bans {
    left: 1598px;
}

.ban-slot {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.ban-slot.banning, .ban-slot.blue-banning {
    box-shadow: 0 0 0 3px #0284C7, 0 0 16px rgba(2, 132, 199, 0.85);
    animation: pulse-ban-blue-glow 1.2s infinite alternate ease-in-out;
}

.ban-slot.red-banning {
    box-shadow: 0 0 0 3px #DC2626, 0 0 16px rgba(220, 38, 38, 0.85);
    animation: pulse-ban-red-glow 1.2s infinite alternate ease-in-out;
}

@keyframes pulse-ban-blue-glow {
    from {
        box-shadow: 0 0 0 2px #0284C7, 0 0 8px rgba(2, 132, 199, 0.5);
    }
    to {
        box-shadow: 0 0 0 3.5px #38BDF8, 0 0 20px rgba(56, 189, 248, 0.95);
    }
}

@keyframes pulse-ban-red-glow {
    from {
        box-shadow: 0 0 0 2px #DC2626, 0 0 8px rgba(220, 38, 38, 0.5);
    }
    to {
        box-shadow: 0 0 0 3.5px #EF4444, 0 0 20px rgba(239, 68, 68, 0.95);
    }
}

.ban-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
    border-radius: 50%;
    transform: scale(1.15);
    transform-origin: center center;
    filter: brightness(0.95);
}

.ban-img.active {
    display: block;
}

/* Ban Hero Slide-Up Animation */
@keyframes hero-ban-slide-up {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(1.15);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1.15);
    }
}

.ban-img.animate-slide-up {
    animation: hero-ban-slide-up 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Single White Diagonal Slash on Banned Heroes (Sleek & Thin with Pop-in Animation) */
@keyframes ban-slash-in {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(-45deg) scaleX(0);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(-45deg) scaleX(1);
    }
}

.ban-slot.has-hero::before,
.ban-slot:has(.ban-img.active)::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 2px;
    background: #FFFFFF;
    border-radius: 1px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 4px rgba(255, 255, 255, 0.7);
    z-index: 10;
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(-45deg);
    animation: ban-slash-in 0.35s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ban-slot.has-hero::after,
.ban-slot:has(.ban-img.active)::after {
    display: none !important;
}

/* Team Logos (Top: 758px - lowered 5px) */
.logo-box {
    position: absolute;
    top: 758px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    background: transparent;
}

.blue-logo-box {
    left: 412px;
    width: 58px;
}

.red-logo-box {
    left: 1450px;
    width: 58px;
}

.logo-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Team Names & School Text (Top: 757px - lowered 5px) */
.team-info-box {
    position: absolute;
    top: 757px;
    height: 76px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 20;
    background: transparent;
    overflow: visible;
}

.blue-info {
    left: 486px;
    width: 294px;
    text-align: left;
}

.red-info {
    left: 1140px;
    width: 294px;
    text-align: right;
}

.text-school {
    font-family: 'Big Noodle Titling', sans-serif;
    font-size: 44px;
    font-weight: 700;
    line-height: 0.95;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: visible;
}

.text-team {
    font-family: 'Radikal Bold', 'Radikal', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.1;
    margin-top: 3px;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: visible;
}

/* Auto-fit text inner span */
.fit-text-inner {
    display: inline-block;
    white-space: nowrap;
    transform-origin: left center;
}

.red-info .fit-text-inner {
    transform-origin: right center;
}

.turn-text .fit-text-inner {
    transform-origin: center center;
}

/* Score Displays (Hidden because score is rendered directly on overlay background via lightning bolts) */
.score-display {
    display: none !important;
}

.blue-score {
    left: 790px;
}

.red-score {
    left: 1096px;
}

/* ================== HERO PICKS & NICKNAMES ================== */
.picks-group {
    position: absolute;
    top: 838px;
    display: flex;
    z-index: 20;
}

.blue-picks {
    left: 25px;
    gap: 15.5px;
}

.red-picks {
    left: 1104px;
    gap: 15.5px;
}

.pick-slot-wrapper {
    width: 146px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pick-card {
    width: 146px;
    height: 176px;
    position: relative;
    background: transparent;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

/* Role Icon Placeholder Background (Visible before hero is picked) */
.role-bg-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 86px;
    height: 86px;
    object-fit: contain;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pick-card.has-hero .role-bg-img,
.pick-card:has(.pick-img.active) .role-bg-img {
    opacity: 0;
    pointer-events: none;
}

.pick-img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.0);
    transform-origin: center center;
    display: none;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.pick-img.active {
    display: block;
}

/* Pick Hero Slide-Up Animation */
@keyframes hero-pick-slide-up {
    0% {
        opacity: 0;
        transform: translateY(80px) scale(1.0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1.0);
    }
}

.pick-img.animate-slide-up {
    animation: hero-pick-slide-up 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Picking highlight animation */
.pick-slot-wrapper.picking .pick-card,
.pick-slot-wrapper.blue-picking .pick-card {
    box-shadow: 0 0 0 2.5px #38BDF8, 0 0 24px rgba(2, 132, 199, 0.6) inset, 0 0 15px rgba(56, 189, 248, 0.4);
    animation: pulse-pick-blue 1.2s infinite alternate ease-in-out;
}

.pick-slot-wrapper.red-picking .pick-card {
    box-shadow: 0 0 0 2.5px #F87171, 0 0 24px rgba(220, 38, 38, 0.6) inset, 0 0 15px rgba(248, 113, 113, 0.4);
    animation: pulse-pick-red 1.2s infinite alternate ease-in-out;
}

@keyframes pulse-pick-blue {
    from {
        box-shadow: 0 0 0 2px #0284C7, 0 0 14px rgba(2, 132, 199, 0.4) inset;
    }
    to {
        box-shadow: 0 0 0 3.5px #38BDF8, 0 0 30px rgba(56, 189, 248, 0.85) inset, 0 0 18px rgba(56, 189, 248, 0.7);
    }
}

@keyframes pulse-pick-red {
    from {
        box-shadow: 0 0 0 2px #DC2626, 0 0 14px rgba(220, 38, 38, 0.4) inset;
    }
    to {
        box-shadow: 0 0 0 3.5px #F87171, 0 0 30px rgba(239, 68, 68, 0.85) inset, 0 0 18px rgba(239, 68, 68, 0.7);
    }
}

/* Player Nicknames (Y: 1022px) */
.nickname-box {
    width: 146px;
    height: 32px;
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Radikal Bold', 'Radikal', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #FFFFFF;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    background: transparent;
    overflow: visible;
}

.nickname-box .fit-text-inner {
    transform-origin: center center;
}

/* ================== CENTER TIMER & STAGE (Aligned with Hero Picks) ================== */
.center-stage-container {
    position: absolute;
    left: 844px;
    top: 840px;
    width: 232px;
    height: 206px;
    z-index: 20;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 2px;
    background: transparent;
}

.stage-title {
    font-family: 'Radikal Bold', 'Big Noodle Titling', sans-serif;
    font-size: 22px;
    font-weight: 900;
    color: #022a9c;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    line-height: 1;
    margin-bottom: 2px;
}

.timer-display {
    font-family: 'Big Noodle Titling', sans-serif;
    font-size: 118px;
    font-weight: 900;
    line-height: 0.82;
    color: #022b9b;
    text-align: center;
    letter-spacing: 0.02em;
    margin-top: 0px;
    margin-bottom: 2px;
}

/* ================== TURN INDICATOR (BANNING / PICKING + BLINKING ARROWS) ================== */
.turn-indicator-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 14px; /* Lowered by 10px */
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1), transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.turn-indicator-box.phase-fade-out {
    opacity: 0;
    transform: translateY(4px) scale(0.92);
}

.turn-indicator-box.phase-fade-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.turn-text-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.turn-text {
    font-family: 'Radikal Bold', 'Big Noodle Titling', sans-serif;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #022b9b;
    line-height: 1;
    text-align: center;
    display: inline-block;
}

.turn-indicator-box.blue-turn .turn-text {
    color: #003bbd;
}

.turn-indicator-box.red-turn .turn-text {
    color: #c90a1e;
}

.arrow-indicator {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    line-height: 1;
    display: none;
    pointer-events: none;
}

.arrow-indicator.arrow-left {
    right: calc(100% + 8px);
    color: #003bbd;
}

.arrow-indicator.arrow-right {
    left: calc(100% + 8px);
    color: #c90a1e;
}

.turn-indicator-box.blue-turn .arrow-left {
    display: block;
    animation: blink-arrow-left 0.65s infinite ease-in-out alternate;
}

.turn-indicator-box.red-turn .arrow-right {
    display: block;
    animation: blink-arrow-right 0.65s infinite ease-in-out alternate;
}

/* Adjustment Phase (Both Arrows Active) */
.turn-indicator-box.adjustment-turn .turn-text {
    color: #022b9b;
}

.turn-indicator-box.adjustment-turn .arrow-left {
    display: block;
    color: #003bbd;
    animation: blink-arrow-left 0.65s infinite ease-in-out alternate;
}

.turn-indicator-box.adjustment-turn .arrow-right {
    display: block;
    color: #c90a1e;
    animation: blink-arrow-right 0.65s infinite ease-in-out alternate;
}

/* Preparing Battlefield Phase (Timer hidden, arrows hidden, centered glowing text, larger and prominent) */
.turn-indicator-box.preparing-battlefield {
    margin-top: 22px;
    padding: 0 6px;
    box-sizing: border-box;
}

.turn-indicator-box.preparing-battlefield .turn-text-wrapper {
    max-width: 220px;
    width: 220px;
    justify-content: center;
}

.turn-indicator-box.preparing-battlefield .turn-text {
    font-family: 'Big Noodle Titling', 'Radikal Bold', sans-serif;
    font-size: 38px;
    font-weight: 900;
    letter-spacing: 0.05em;
    color: #022b9b;
    text-transform: uppercase;
    white-space: nowrap;
    max-width: 220px;
    animation: pulse-glow-preparing 1.5s infinite alternate ease-in-out;
}

.turn-indicator-box.preparing-battlefield .arrow-indicator {
    display: none !important;
}

@keyframes pulse-glow-preparing {
    0% {
        opacity: 0.82;
        text-shadow: 0 0 6px rgba(2, 43, 155, 0.2);
    }
    100% {
        opacity: 1;
        text-shadow: 0 0 14px rgba(2, 43, 155, 0.6);
    }
}

@keyframes blink-arrow-left {
    0% {
        opacity: 0.25;
        transform: translateY(-50%) translateX(2px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%) translateX(-4px) scale(1.15);
    }
}

@keyframes blink-arrow-right {
    0% {
        opacity: 0.25;
        transform: translateY(-50%) translateX(-2px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%) translateX(4px) scale(1.15);
    }
}