body {
    background-color: #121212;
    color: white;
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 0;
    padding: 110px 40px 40px 40px;
}
h1 {
    font-size: 42px;
    margin-bottom: 40px;
}

h2 {
    font-size: 28px;
}

p {
    font-size: 18px;
}

button {
    background-color: #ff7a00;
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 18px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.754);
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 20px;
    filter: drop-shadow(0 6px 6px rgba(2, 0, 0, 0.648));
}

button:hover {
    background-color: #f59337;
}

#gameScreen {
    display: none;
}

#createPlayerScreen {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#createPlayerScreen h1 {
    margin-bottom: 20px;
}

#createPlayerScreen h2 {
    margin-bottom: 30px;
}

#createPlayerScreen {
    min-height: 80vh;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;
}


#createPlayerScreen h1 {
    font-size: 48px;
    margin-bottom: 10px;
}


.createDescription {
    color: #9a9a9a;

    max-width: 700px;

    line-height: 1.5;

    margin: 0 auto 35px auto;

    text-align: center;
}


.nameFields {
    display: flex;
    gap: 15px;
}


.nameField {
    display: flex;
    flex-direction: column;
    text-align: left;
}


.nameField label {
    font-size: 15px;
    font-weight: bold;

    margin-bottom: 8px;
}


.nameField input {
    width: 220px;

    padding: 16px;

    background-color: #1e1e1e;
    color: white;

    border: 2px solid #333333;
    border-radius: 10px;

    font-size: 17px;

    outline: none;
}


.nameField input::placeholder {
    color: #777777;
}


.nameField input:focus {
    border-color: #ff7a00;
}

.topNav {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: 70px;

    background-color: #181818;

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

    padding: 0 40px;

    box-sizing: border-box;

    border-bottom: 1px solid #2e2e2e;

    z-index: 1000;
}


.navLogo {
    color: white;

    font-size: 20px;
    font-weight: bold;

    text-decoration: none;
}


.navLinks {
    display: flex;

    gap: 30px;
}


.navLinks a {
    color: #aaaaaa;

    text-decoration: none;

    font-size: 16px;

    transition: 0.2s;
}


.navLinks a:hover {
    color: #ff7a00;
}

#playerDetailsScreen {
    max-width: 1100px;

    margin: 0 auto;
}


#playerDetailsScreen h1 {
    font-size: 48px;
    margin-bottom: 6px;
}


#playerNamePreview {
    color: #ff7a00;
    margin-top: 18px;
    margin-bottom: 26px;
}


.buildSection {
    background-color: #181818;

    border: 1px solid #2e2e2e;

    border-radius: 14px;

    padding: 30px;

    margin-bottom: 30px;
}


.buildSection h2 {
    margin-top: 0;
}


.sectionDescription {
    color: #888888;

    margin-bottom: 25px;
}



/* POSITION BUTTONS */

.positionButtons {
    display: flex;

    justify-content: center;

    gap: 15px;

    flex-wrap: wrap;
}


.positionButton {
    width: 150px;
    height: 105px;

    margin-top: 0;

    padding: 15px;

    background-color: #222222;

    border: 2px solid #383838;

    border-radius: 12px;

    display: flex;
    flex-direction: column;

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

    font-size: 22px;

    transition: 0.2s;
}


.positionButton span {
    color: #999999;

    font-size: 13px;

    margin-top: 8px;
}


.positionButton:hover {
    background-color: #292929;

    border-color: #ff7a00;
}


.positionButton.selected {
    background-color: #332313;

    border-color: #ff7a00;
}


.positionButton.selected span {
    color: #cccccc;
}

/* SMALLER POSITION SECTION */

.positionSection {
    max-width: 880px;
    margin: 0 auto 26px auto;
    padding: 24px 24px 28px 24px;
}


.positionSection .sectionDescription {
    margin-bottom: 18px;
}


.positionSection .positionButtons {
    gap: 12px;
}


.positionSection .positionButton {
    width: 130px;
    height: 92px;
    padding: 12px;
    font-size: 18px;
}


.positionSection .positionButton span {
    font-size: 12px;
    margin-top: 6px;
}

/* PHYSICAL OPTIONS */

.physicalOptions {
    display: flex;

    justify-content: center;

    gap: 45px;

    flex-wrap: wrap;

    padding: 35px 0;

    margin-bottom: 20px;
}


.buildOption {
    width: 280px;

    display: flex;
    flex-direction: column;

    text-align: left;
}


.buildOption label {
    color: white;

    font-size: 20px;
    font-weight: bold;

    margin-bottom: 12px;
}


.sliderValue {
    color: #ff7a00;

    font-size: 24px;
    font-weight: bold;

    min-height: 30px;

    margin-bottom: 18px;
}



/* CUSTOM SLIDER CONTAINER */

.sliderShell {
    position: relative;

    width: 100%;
    height: 30px;

    display: flex;

    align-items: center;
}



/* THE COLORED BAR UNDER THE SLIDER */

.sliderTrack {
    position: absolute;

    left: 11px;
    right: 11px;

    height: 8px;

    border-radius: 6px;

    background-color: #666666;

    pointer-events: none;
}



/* THE ACTUAL SLIDER */

.customSlider {
    -webkit-appearance: none;
    appearance: none;

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 30px;

    padding: 0;
    margin: 0;

    background: transparent;

    outline: none;

    cursor: pointer;
}



/* CHROME / SAFARI TRACK */

.customSlider::-webkit-slider-runnable-track {
    height: 8px;

    background: transparent;

    border: none;
}



/* CHROME / SAFARI THUMB */

.customSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;

    width: 22px;
    height: 22px;

    margin-top: -7px;

    border-radius: 50%;

    background-color: white;

    border: 4px solid #ff7a00;

    cursor: pointer;
}



/* FIREFOX TRACK */

.customSlider::-moz-range-track {
    height: 8px;

    background: transparent;

    border: none;
}



/* FIREFOX THUMB */

.customSlider::-moz-range-thumb {
    width: 14px;
    height: 14px;

    border-radius: 50%;

    background-color: white;

    border: 4px solid #ff7a00;

    cursor: pointer;
}



/* CONTINUE BUTTON */

#continueBuildButton {
    margin-top: 15px;

    min-width: 180px;
}

/* ========================= */
/* PLAYER PREVIEW */
/* ========================= */

.playerPreviewPanel {

    width: 275px;

    margin: 20px auto 26px auto;

    padding: 18px 16px 18px 16px;

    background-color: #181818;

    border: 1px solid #2e2e2e;

    border-radius: 14px;

    box-sizing: border-box;
}


.playerPreviewPanel h2 {

    margin-top: 0;

    margin-bottom: 14px;

    color: #aaaaaa;

    font-size: 18px;
}


#playerGraphicWrap {

    width: 100%;

    min-height: 390px;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: #f4f4f4;

    border-radius: 10px;

    overflow: hidden;

    box-sizing: border-box;

    padding: 12px;
}


#playerGraphic {

    width: 140px;

    height: auto;

    display: block;

    overflow: visible;
}

/* ================================================== */
/* PLAYER + SKILLS LAYOUT */
/* ================================================== */

#playerDetailsScreen {
    max-width: 1450px;
    margin: 0 auto;
}


.playerAndSkillsLayout {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-top: 25px;
    margin-bottom: 30px;
}


.playerAndSkillsLayout .playerPreviewPanel {
    width: 300px;
    min-width: 300px;
    margin: 0;
    box-sizing: border-box;
}


.skillsBrowserPanel {
    flex: 1;
    min-width: 0;
    background-color: #181818;
    border: 1px solid #2e2e2e;
    border-radius: 14px;
    padding: 20px;
    box-sizing: border-box;
    text-align: left;
}


.skillsBrowserHeader {
    margin-bottom: 18px;
}


.skillsBrowserHeader h2 {
    margin: 0 0 6px 0;
    font-size: 24px;
}


.skillsBrowserHeader p {
    margin: 0;
    color: #8f8f8f;
    font-size: 14px;
    line-height: 1.4;
}


.skillsCategoriesContainer {
    display: flex;
    flex-direction: column;
    gap: 22px;
}


/* ================================================== */
/* SKILL CATEGORY */
/* ================================================== */


/* ================================================== */
/* SKILL ITEM */
/* ================================================== */

.skillPreviewItem {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ================================================== */
/* MOBILE */
/* ================================================== */

@media (max-width: 980px) {

    .playerAndSkillsLayout {
        flex-direction: column;
    }

    .playerAndSkillsLayout .playerPreviewPanel {
        width: 300px;
        min-width: 300px;
        margin: 0 auto;
    }

    .skillCategorySkills {
        grid-template-columns: 1fr;
    }

}

/* ================================================== */
/* COMPACT SKILL DISPLAY */
/* ================================================== */

.skillCategoryBlock {
    padding: 14px;
}


.skillCategoryTitle {
    margin-bottom: 12px;
    font-size: 18px;
}


.skillCategorySkills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
}


.skillPreviewItem {
    display: block;
}

.compactSkillRow {
    display: grid;

    grid-template-columns:
        minmax(135px, 1.15fr)
        28px
        minmax(130px, 1.5fr);

    align-items: center;

    gap: 8px;

    min-height: 38px;
}


.compactSkillName {
    color: #eeeeee;

    font-size: 13px;

    font-weight: bold;

    white-space: normal;

    overflow: visible;

    text-overflow: unset;

    line-height: 1.25;

    overflow-wrap: break-word;
}


.compactSkillCurrent {
    color: white;

    font-size: 13px;

    font-weight: bold;

    text-align: right;
}


.compactSkillBar {
    position: relative;

    width: 200%;

    height: 8px;

    background-color: #555555;

    border-radius: 999px;

    overflow: visible;
}


.compactSkillMaxRange {
    position: absolute;

    left: 0;
    top: 0;

    height: 100%;

    background-color: #8a4a16;

    border-radius: 999px;

    z-index: 1;
}


.compactSkillFill {
    position: absolute;

    left: 0;
    top: 0;

    height: 100%;

    background-color: #ff7a00;

    border-radius: 999px;

    z-index: 2;
}


.compactSkillAfterMax {
    position: absolute;

    top: 0;

    height: 100%;

    background-color: #555555;

    z-index: 1;
}


.compactSkillMaxMarker {
    position: absolute;

    top: -3px;

    width: 2px;
    height: 13px;

    background-color: white;

    transform: translateX(-50%);

    z-index: 4;
}


.compactSkillMax {
    color: #aaaaaa;

    font-size: 10px;

    font-weight: bold;

    white-space: nowrap;
}

/* ================================================== */
/* CATEGORY DROPDOWNS */
/* ================================================== */

.skillsCategoriesContainer {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


.skillCategoryDropdown {
    width: 100%;

    background-color: #202020;

    border: 1px solid #333333;

    border-radius: 10px;

    overflow: hidden;

    box-sizing: border-box;

    transition: border-color 0.2s,
                background-color 0.2s;
}


.skillCategoryDropdown:hover {
    border-color: #555555;
}


.skillCategoryDropdown[open] {
    border-color: #ff7a00;
}


/* REMOVE NORMAL DETAILS ARROW */

.skillCategorySummary {
    list-style: none;

    cursor: pointer;

    padding: 12px 14px;

    user-select: none;
}


.skillCategorySummary::-webkit-details-marker {
    display: none;
}



/* ================================================== */
/* CATEGORY HEADER */
/* ================================================== */

.categorySummaryTop {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 10px;
}


.categorySummaryName {
    color: white;

    font-size: 16px;

    font-weight: bold;
}



/* ================================================== */
/* DROPDOWN CONTROL */
/* ================================================== */

.categoryDropdownControl {
    display: flex;

    align-items: center;

    gap: 8px;

    color: #aaaaaa;

    font-size: 11px;

    font-weight: bold;

    text-transform: uppercase;
}


.categoryArrow {
    width: 24px;
    height: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: #2d2d2d;

    border: 1px solid #444444;

    border-radius: 6px;

    color: #ff7a00;

    font-size: 9px;

    transition: transform 0.2s;
}


.skillCategoryDropdown[open]
.categoryArrow {
    transform: rotate(180deg);
}


.skillCategoryDropdown[open]
.categoryDropdownText {
    color: #ff7a00;
}



/* ================================================== */
/* CATEGORY RATING */
/* ================================================== */

.categorySummaryStats {
    display: grid;

    grid-template-columns: 65px 1fr;

    align-items: end;

    gap: 12px;
}


.categoryCurrentDisplay {
    display: flex;

    flex-direction: column;

    gap: 1px;
}


.categoryCurrentLabel {
    color: #777777;

    font-size: 8px;

    font-weight: bold;
}


.categorySummaryRating {
    color: white;

    font-size: 18px;

    font-weight: bold;
}



/* ================================================== */
/* CATEGORY BAR */
/* ================================================== */

.categoryRatingBarArea {
    position: relative;

    width: 100%;

    padding-top: 16px;
}


.categoryRatingBar {
    position: relative;

    width: 100%;

    height: 8px;

    background-color: #555555;

    border-radius: 999px;

    overflow: visible;
}


.categoryMaxRange {
    position: absolute;

    left: 0;
    top: 0;

    height: 100%;

    background-color: #8a4a16;

    border-radius: 999px;

    z-index: 1;
}


.categoryCurrentFill {
    position: absolute;

    left: 0;
    top: 0;

    height: 100%;

    background-color: #ff7a00;

    border-radius: 999px;

    z-index: 2;
}


.categoryAfterMax {
    position: absolute;

    top: 0;

    height: 100%;

    background-color: #555555;

    z-index: 1;
}


.categoryMaxMarker {
    position: absolute;

    top: -3px;

    width: 2px;
    height: 14px;

    background-color: white;

    transform: translateX(-50%);

    z-index: 4;
}



/* MAX DIRECTLY ABOVE WHITE LINE */

.categoryMaxFloating {
    position: absolute;

    top: 0;

    transform: translateX(-50%);

    color: #cccccc;

    font-size: 9px;

    font-weight: bold;

    white-space: nowrap;
}



/* ================================================== */
/* OPENED SKILLS */
/* ================================================== */

.categoryIndividualSkills {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px 20px;

    padding: 12px 14px 14px 14px;

    border-top: 1px solid #303030;

    background-color: #191919;
}


.skillCategorySummary:hover {
    background-color: #252525;
}



/* ================================================== */
/* HOVER */
/* ================================================== */

.skillCategorySummary:hover {
    background-color: #252525;
}



/* ================================================== */
/* MOBILE */
/* ================================================== */

@media (max-width: 900px) {

    .categoryIndividualSkills {
        grid-template-columns: 1fr;
    }

}

/* ================================================== */
/* TIGHTER BUILD PAGE SPACING */
/* ================================================== */

body {
    padding-top: 90px;
}


#playerDetailsScreen h1 {
    margin-top: 0;

    margin-bottom: 6px;
}


.createDescription {
    margin:
        0
        auto
        10px
        auto;

    max-width: 650px;
}


#playerNamePreview {
    margin-top: 10px;

    margin-bottom: 16px;
}


.positionSection {
    margin-bottom: 18px;
}


.physicalOptions {
    padding-top: 24px;

    padding-bottom: 24px;

    margin-bottom: 10px;
}

/* ================================================== */
/* OVERALL + POTENTIAL */
/* ================================================== */

.playerRatingsSummary {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-top: 14px;
}


.playerRatingCard {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 11px 6px;

    background-color: #202020;

    border: 1px solid #303030;

    border-radius: 9px;
}


.playerRatingLabel {
    color: #999999;

    font-size: 10px;

    font-weight: bold;

    text-transform: uppercase;

    letter-spacing: 0.6px;

    margin-bottom: 3px;
}


.playerRatingNumber {
    color: #ff7a00;

    font-size: 26px;

    font-weight: bold;
}

/* ================================================== */
/* CONTINUE + BUILD LOCK WARNING */
/* ================================================== */

/* ================================================== */
/* LEFT-SIDE CONTINUE AREA */
/* ================================================== */

.continueBuildArea {
    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 16px;

    margin-top: 28px;

    box-sizing: border-box;
}


.bodyLockWarning {
    width: 100%;

    display: flex;

    align-items: flex-start;

    justify-content: center;

    gap: 10px;

    color: #ee0000;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.45;

    text-align: left;

    box-sizing: border-box;
}


.bodyLockWarningIcon {
    width: 24px;
    height: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border: 1px solid #777777;

    border-radius: 50%;

    color: #ee0000;

    font-size: 14px;

    font-weight: bold;
}


#continueBuildButton {
    width: 100%;

    max-width: 230px;

    margin: 0;

    padding: 14px 24px;

    font-size: 16px;

    font-weight: bold;

    text-align: center;
}

/* ============================================================ */
/* CAREER SETUP PAGE */
/* ============================================================ */

#careerSetupScreen {
    width: calc(100% - 80px);

    max-width: 1250px;

    margin: 0 auto;

    padding-top: 45px;
    padding-bottom: 45px;

    box-sizing: border-box;
}



/* ============================================================ */
/* HEADER */
/* ============================================================ */

.careerSetupHeader {
    text-align: center;

    margin-bottom: 25px;
}


.careerSetupHeader h1 {
    margin: 0 0 7px 0;

    color: white;

    font-size: 46px;
}


.careerSetupHeader p {
    margin: 0;

    color: #999999;

    font-size: 15px;
}



/* ============================================================ */
/* LOCKED PLAYER SUMMARY */
/* ============================================================ */

.careerPlayerSummary {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 16px 20px;

    margin-bottom: 18px;

    background-color: #181818;

    border: 1px solid #303030;

    border-radius: 12px;

    box-sizing: border-box;
}


.careerPlayerName {
    color: white;

    font-size: 21px;

    font-weight: bold;

    margin-bottom: 4px;
}


.careerPlayerBuild {
    color: #999999;

    font-size: 15px;
}


.careerPlayerRatings {
    display: flex; 

    gap: 10px;
}


.careerSummaryRating {
    min-width: 67px;

    padding: 8px 12px;

    display: flex;

    flex-direction: column;

    align-items: center;

    background-color: #222222;

    border: 1px solid #333333;

    border-radius: 8px;
}


.careerSummaryRating span {
    color: #888888;

    font-size: 9px;

    font-weight: bold;
}


.careerSummaryRating strong {
    color: #ff7a00;

    font-size: 24px;
}



/* ============================================================ */
/* SECTIONS */
/* ============================================================ */

.careerSetupSection {
    padding: 20px;

    margin-bottom: 18px;

    background-color: #181818;

    border: 1px solid #303030;

    border-radius: 12px;

    box-sizing: border-box;
}


.careerSectionHeader {
    margin-bottom: 16px;
}


.careerSectionHeader h2 {
    margin: 0 0 4px 0;

    color: white;

    font-size: 21px;
}


.careerSectionHeader p {
    margin: 0;

    color: #8f8f8f;

    font-size: 13px;

    line-height: 1.4;
}



/* ============================================================ */
/* DIFFICULTY */
/* ============================================================ */

.difficultyCards {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 12px;
}


.difficultyCard {
    min-height: 180px;

    padding: 16px;

    text-align: left;

    background-color: #262626;

    border: 1px solid #383838;

    border-radius: 10px;

    cursor: pointer;

    transition:
        border-color 0.15s,
        background-color 0.15s,
        transform 0.15s;
}


.difficultyCard:hover {
    border-color: #666666;

    transform: translateY(-2px);
}


.difficultyCard.selectedDifficulty {
    border-color: #ff7a00;

    background-color: #2a2119;
}


.difficultyName {
    color: white;

    font-size: 25px;

    font-weight: bold;

    margin-bottom: 4px;
}


.difficultyDraft {
    color: #ff7a00;

    font-size: 20px;

    font-weight: bold;

    margin-bottom: 10px;
}


.difficultyMinutes {
    color: white;

    font-size: 20px;

    font-weight: bold;

    margin-bottom: 9px;
}


.difficultyDescription {
    color: #999999;

    font-size: 11px;

    line-height: 1.45;
}



/* ============================================================ */
/* TWO COLUMN AREA */
/* ============================================================ */

.careerSetupTwoColumn {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 18px;
}


.smallCareerSection {
    margin-bottom: 18px;
}



/* ============================================================ */
/* SELECTS */
/* ============================================================ */

.careerSelect {
    width: 100%;

    height: 44px;

    padding: 0 12px;

    color: white;

    background-color: #242424;

    margin-top: 20px;

    border: 1px solid #3a3a3a;

    border-radius: 8px;

    font-size: 13px;

    outline: none;

    box-sizing: border-box;
}


.careerSelect:focus {
    border-color: #ff7a00;
}



/* ============================================================ */
/* AGE */
/* ============================================================ */

.careerAgeButtons {
    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 7px;
}


.careerAgeButton {
    height: 44px;

    color: white;

    background-color: #242424;

    border: 1px solid #3a3a3a;

    border-radius: 8px;

    font-weight: bold;

    cursor: pointer;
}


.careerAgeButton:hover {
    border-color: #666666;
}


.careerAgeButton.selectedCareerAge {
    color: #ff7a00;

    border-color: #ff7a00;

    background-color: #2a2119;
}



/* ============================================================ */
/* BACKGROUND */
/* ============================================================ */

.backgroundTypeButtons {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;

    margin-bottom: 18px;
}


.backgroundTypeButton {
    height: 48px;

    color: white;

    background-color: #242424;

    border: 1px solid #3b3b3b;

    border-radius: 8px;

    font-size: 14px;

    font-weight: bold;

    cursor: pointer;
}


.backgroundTypeButton:hover {
    border-color: #666666;
}


.backgroundTypeButton.selectedBackgroundType {
    color: #ff7a00;

    border-color: #ff7a00;

    background-color: #2a2119;
}


.backgroundOptions {
    display: grid;

    grid-template-columns:
        2fr 1fr;

    gap: 15px;

    padding-top: 5px;
}


.hiddenCareerOption {
    display: none;
}


.careerFormField {
    display: flex;

    flex-direction: column;

    gap: 7px;
}


.careerFormField label {
    color: #bbbbbb;

    font-size: 12px;

    font-weight: bold;
}



/* ============================================================ */
/* ERROR */
/* ============================================================ */

.careerSetupError {
    min-height: 20px;

    margin-bottom: 6px;

    color: #ff6b6b;

    font-size: 13px;

    text-align: center;

    font-weight: bold;
}



/* ============================================================ */
/* BEGIN CAREER */
/* ============================================================ */

.beginCareerArea {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;
}


.careerSetupNote {
    max-width: 2000px;

    color: #999999;

    font-size: 18px;

    line-height: 1.45;

    text-align: center;
}


#beginCareerButton {
    width: 230px;

    padding: 14px 25px;

    color: white;

    background-color: #ff7a00;

    border: none;

    border-radius: 8px;

    font-size: 16px;

    font-weight: bold;

    cursor: pointer;
}


#beginCareerButton:hover {
    filter: brightness(1.08);
}



/* ============================================================ */
/* MOBILE */
/* ============================================================ */

@media (max-width: 900px) {

    #careerSetupScreen {
        width: calc(100% - 30px);
    }


    .difficultyCards {
        grid-template-columns:
            1fr 1fr;
    }


    .careerSetupTwoColumn {
        grid-template-columns:
            1fr;
    }


    .backgroundOptions {
        grid-template-columns:
            1fr;
    }

}

/* ============================================================ */
/* PRE-DRAFT PAGE */
/* ============================================================ */

#draftScreen {
    width: calc(100% - 70px);

    max-width: 1380px;

    margin: 0 auto;

    padding-top: 42px;
    padding-bottom: 70px;

    box-sizing: border-box;

    text-align: left;
}



/* ============================================================ */
/* HEADER */
/* ============================================================ */

.draftHeader {
    max-width: 800px;

    margin:
        0 auto 32px;

    text-align: center;
}


.draftHeader h1 {
    margin:
        0 0 10px;

    color:
        #ffffff;

    font-size:
        52px;

    font-weight:
        950;

    line-height:
        1;

    letter-spacing:
        -1.2px;
}


.draftHeader p {
    margin: 0;

    color:
        #ababab;

    font-size:
        17px;

    font-weight:
        650;

    line-height:
        1.5;
}



/* ============================================================ */
/* PLAYER SUMMARY */
/* ============================================================ */

.draftPlayerSummary {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 28px;

    padding:
        22px 26px;

    margin-bottom:
        24px;

    background:
        linear-gradient(
            135deg,
            #1b1b1b,
            #171717
        );

    border:
        1px solid #343434;

    border-radius:
        13px;

    box-sizing:
        border-box;
}


.draftPlayerName {
    margin-bottom:
        8px;

    color:
        #ffffff;

    font-size:
        30px;

    font-weight:
        950;

    line-height:
        1.05;

    letter-spacing:
        -0.4px;
}


.draftBackground {
    color:
        #aaaaaa;

    font-size:
        16px;

    font-weight:
        700;

    line-height:
        1.3;
}


.draftSummaryRatings {
    display: flex;

    align-items: stretch;

    gap: 12px;
}


.draftSummaryRating {
    min-width:
        96px;

    padding:
        12px 16px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    background:
        #222222;

    border:
        1px solid #404040;

    border-radius:
        10px;

    box-sizing:
        border-box;
}


.draftSummaryRating span {
    display: block;

    margin-bottom:
        5px;

    color:
        #999999;

    font-size:
        11px;

    font-weight:
        950;

    letter-spacing:
        0.8px;
}


.draftSummaryRating strong {
    display: block;

    color:
        #ff8520;

    font-size:
        36px;

    font-weight:
        950;

    line-height:
        1;

    transition:
        transform 0.18s ease,
        color 0.18s ease;
}


.draftSummaryRating strong.overallPreviewIncrease {
    color: #1aff00;

    transform: scale(1.08);
}



/* ============================================================ */
/* MAIN SECTIONS */
/* ============================================================ */

.draftSetupSection {
    width: 100%;
    padding: clamp(18px, 2vw, 30px);
    margin-bottom: 22px;
    background: #181818;
    border: 1px solid #333333;
    border-radius: 14px;
    box-sizing: border-box;
}

.draftSectionHeader {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.draftSectionHeader > div:first-child {
    flex: 1 1 560px;
    min-width: 0;
}

.draftSectionHeader h2 {
    margin: 0 0 9px;
    color: #ffffff;
    font-size: clamp(28px, 3vw, 31px);
    font-weight: 950;
    line-height: 1.05;
    letter-spacing: -0.4px;
}

.draftSectionHeader p {
    max-width: 820px;
    margin: 0;
    color: #a8a8a8;
    font-size: clamp(15px, 1.4vw, 16px);
    font-weight: 650;
    line-height: 1.55;
}

.boostSelectionCount {
    flex: 0 0 auto;
    align-self: flex-start;
    min-width: 108px;
    padding: 12px 18px;
    color: #ff8520;
    background: #211a15;
    border: 2px solid #6b401f;
    border-radius: 10px;
    font-size: 24px;
    font-weight: 950;
    line-height: 1;
    text-align: center;
    box-sizing: border-box;
}



/* ============================================================ */
/* BOOST GROUPS */
/* ============================================================ */

#boostSkillGroups {
    width: 100%;
}


.draftBoostGroup {
    width:
        100%;

    margin-bottom:
        34px;

    padding-top:
        4px;
}


.draftBoostGroup:last-child {
    margin-bottom: 8px;
}


.draftBoostGroup h3 {
    margin:
        0 0 14px;

    padding-bottom:
        10px;

    color:
        #ffffff;

    border-bottom:
        1px solid #343434;

    font-size:
        21px;

    font-weight:
        950;

    line-height:
        1;

    letter-spacing:
        -0.2px;
}



/* ============================================================ */
/* BREAKOUT SKILLS — 5 COLUMN / LARGE TEXT / SAME CARD SIZE */
/* ============================================================ */
.draftBoostSkillGrid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    box-sizing: border-box;
}

.draftBoostSkill {
    position: relative;

    min-width: 0;

    /* MUCH SHORTER CARD */
    min-height: 118px;

    display: flex;
    flex-direction: column;

    align-items: stretch;

    /* DO NOT spread content across the full card height */
    justify-content: flex-start;

    gap: 18px;

    margin: 0;

    padding: 14px 14px 12px;

    overflow: hidden;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #242424 0%,
            #1e1e1e 100%
        );

    border:
        1px solid #3d3d3d;

    border-radius:
        10px;

    box-sizing: border-box;

    cursor: pointer;

    text-align: left;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.025),
        0 3px 8px
        rgba(0, 0, 0, 0.16);

    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;
}

/* ============================================================ */
/* BREAKOUT CARD INTERACTION */
/* ============================================================ */

/*
   Everything inside the card is display-only.
   The BUTTON itself receives the click.
*/
.draftBoostSkill > * {
    pointer-events: none;
}


/* HOVER */

.draftBoostSkill:hover:not(:disabled):not(.selectedBoostSkill) {
    background:
        linear-gradient(
            145deg,
            #2b2b2b 0%,
            #232323 100%
        );

    border-color:
        #666666;

    transform:
        translateY(-2px);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.04),
        0 7px 18px
        rgba(0, 0, 0, 0.28);
}


/* ACTUAL PRESS */

.draftBoostSkill:active:not(:disabled) {
    transform:
        translateY(0)
        scale(0.985);
}


/* SELECTED CARD */

.draftBoostSkill.selectedBoostSkill {
    background:
        linear-gradient(
            145deg,
            #382617 0%,
            #271e17 55%,
            #211b17 100%
        );

    border:
        2px solid
        #ff7a00;

    box-shadow:
        0 0 0 1px
        rgba(255, 122, 0, 0.12),
        0 0 18px
        rgba(255, 122, 0, 0.10),
        0 7px 18px
        rgba(0, 0, 0, 0.30);
}

.draftBoostSkill.selectedBoostSkill:hover:not(:disabled) {
    transform:
        translateY(-2px);

    border-color:
        #ff7a00;

    box-shadow:
        0 0 0 1px
        rgba(255, 122, 0, 0.14),
        0 0 20px
        rgba(255, 122, 0, 0.12),
        0 8px 20px
        rgba(0, 0, 0, 0.30);
}

/* SELECTED BOOSTED NUMBER */

.draftBoostSkill.selectedBoostSkill
.draftBoostNewRating {
    color:
        #ff9a45;
}


/* SELECTED +20 BADGE */

.draftBoostSkill.selectedBoostSkill
.draftBoostGain {
    color:
        #a2f0ab;

    background:
        #19321d;

    border-color:
        #398448;
}


/* DISABLED AFTER LOCKING */

.draftBoostSkill:disabled {
    cursor:
        default;

    opacity:
        0.82;
}


/* Keep a locked selected card clearly visible */

.draftBoostSkill.selectedBoostSkill:disabled {
    opacity:
        1;
}

.draftBoostSkillName {
    display: block;

    width: 100%;

    padding-right: 62px;

    box-sizing: border-box;

    color: #ffffff;

    font-size: 17px;

    font-weight: 950;

    line-height: 1.08;

    letter-spacing: -0.25px;

    word-break: normal;

    overflow-wrap: normal;

    hyphens: none;
}

.draftBoostRatingRow {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        30px
        minmax(0, 1fr);

    align-items: end;

    gap: 8px;

    margin-top: auto;
}

.draftBoostRatingBlock {
    min-width: 0;
}

.draftBoostRatingLabel {
    display: block;

    margin-bottom: 4px;

    color: #9d9d9d;

    font-size: 10px;

    font-weight: 950;

    line-height: 1;

    letter-spacing: 0.6px;
}

.draftBoostRatingBlock strong {
    display: block;

    font-size: 30px;

    font-weight: 950;

    line-height: 0.95;

    letter-spacing: -0.6px;
}

.draftBoostCurrentRating {
    color: #ffffff;
}

.draftBoostNewRating {
    color: #ff8a28;
}

.draftBoostArrow {
    position: static;

    width: 30px;
    height: 30px;

    display: flex;

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

    padding: 0;
    margin: 0;

    transform: none;

    color: #8d8d8d;

    font-size: 24px;

    font-weight: 900;

    line-height: 1;

    text-align: center;

    pointer-events: none;
}

.draftBoostRatingBlock:first-child {
    text-align: left;
}

.draftBoostRatingBlock:last-child {
    text-align: right;
}

.draftBoostGain {
    position: absolute;

    top: 10px;

    right: 10px;

    min-width: 48px;

    padding: 6px 8px;

    color: #91ed9e;

    background: #18251a;

    border: 1px solid #35683f;

    border-radius: 7px;

    box-sizing: border-box;

    font-size: 11px;

    font-weight: 950;

    line-height: 1;

    text-align: center;
}

@media (max-width: 1650px) {
    .draftBoostSkillGrid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1320px) {
    .draftBoostSkillGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .draftBoostSkillGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .boostSelectionCount {
        margin-top: 4px;
    }
}

@media (max-width: 640px) {
    .draftBoostSkillGrid {
        grid-template-columns: 1fr;
    }

    .draftBoostSkill {
        min-height: 155px;
    }

    .draftBoostSkillName {
        font-size: 16px;
    }
}

/* ============================================================ */
/* LOCKED BOOST */
/* ============================================================ */

.draftBoostLockedRating {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        14px;
}


.draftBoostLockedRating span {
    color:
        #858585;

    font-size:
        9px;

    font-weight:
        950;

    letter-spacing:
        0.7px;
}


.draftBoostLockedRating strong {
    color:
        #ff8a28;

    font-size:
        28px;

    font-weight:
        950;

    line-height:
        1;
}


.draftBoostAppliedBadge {
    color:
        #88e394;

    font-size:
        10px;

    font-weight:
        950;

    letter-spacing:
        0.6px;
}



/* ============================================================ */
/* LOCK-IN AREA */
/* ============================================================ */

.boostLockArea {
    width: 100%;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 12px;

    margin-top: 8px;
    margin-bottom: 10px;

    padding-top: 22px;
    padding-bottom: 10px;

    border-top: 1px solid #303030;

    box-sizing: border-box;
}

#mentalitySection {
    margin-top: 32px;
}


.permanentBoostWarning {
    max-width:
        760px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    margin:
        0;

    padding:
        13px 16px;

    color:
        #ff8d8d;

    background:
        rgba(
            120,
            30,
            30,
            0.12
        );

    border:
        1px solid
        rgba(
            255,
            90,
            90,
            0.20
        );

    border-radius:
        8px;

    box-sizing:
        border-box;

    font-size:
        15px;

    font-weight:
        750;

    line-height:
        1.4;

    text-align:
        left;
}


.permanentBoostWarning span {
    width: 24px;
    height: 24px;

    min-width: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #ff4d4d;

    border-radius: 50%;

    color: #ff4d4d;

    font-size: 13px;

    font-weight: bold;
}



/* ============================================================ */
/* PRIMARY DRAFT BUTTON */
/* ============================================================ */

.draftPrimaryButton {
    min-width: 310px;

    display: block;

    margin: 18px auto 0 auto;

    padding: 17px 32px;

    color: white;

    background-color: #ff7a00;

    border: none;

    border-radius: 8px;

    box-sizing: border-box;

    font-size: 17px;

    font-weight: 950;

    cursor: pointer;

    text-align: center;

    text-shadow: none;

    filter: none;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.28);

    transition:
        transform 0.15s ease,
        background-color 0.15s ease,
        opacity 0.15s ease;
}


.boostLockArea .draftPrimaryButton {
    margin: 0;
}


.draftPrimaryButton:hover:not(:disabled) {
    background-color: #f58a25;

    transform: translateY(-1px);
}


.draftPrimaryButton:disabled {
    opacity: 0.35;

    cursor: default;

    transform: none;
}



/* ============================================================ */
/* MENTALITY */
/* ============================================================ */

.mentalityCards {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;
}


.mentalityCard {
    min-width: 0;
    min-height: 135px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

    gap: 9px;

    margin: 0;

    padding: 17px;

    color: white;

    background-color: #222222;

    border: 1px solid #3a3a3a;

    border-radius: 10px;

    box-sizing: border-box;

    cursor: pointer;

    text-align: left;

    text-shadow: none;

    filter: none;

    box-shadow: none;

    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        background-color 0.15s ease;
}


.mentalityCard:hover {
    background-color: #292929;

    border-color: #666666;

    transform: translateY(-2px);
}


.mentalityCard.selectedMentality {
    background:
        linear-gradient(
            135deg,
            #342415,
            #241d18
        );

    border-color: #ff7a00;
}


.mentalityCard strong {
    color: white;

    font-size: 18px;
}


.mentalityCard span {
    color: #999999;

    font-size: 13px;

    line-height: 1.5;
}



/* ============================================================ */
/* RESULTS */
/* ============================================================ */

.seasonStatsGrid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: 10px;

    margin-bottom: 12px;
}


.seasonStatBox {
    padding: 18px 8px;

    text-align: center;

    background-color: #222222;

    border: 1px solid #333333;

    border-radius: 9px;

    box-sizing: border-box;
}


.seasonStatBox span,
.seasonEfficiencyStat span {
    display: block;

    margin-bottom: 5px;

    color: #888888;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 0.3px;
}


.seasonStatBox strong {
    color: #ff7a00;

    font-size: 28px;
}


.seasonEfficiencyGrid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;
}


.seasonEfficiencyStat {
    padding: 13px;

    text-align: center;

    background-color: #202020;

    border: 1px solid #303030;

    border-radius: 8px;

    box-sizing: border-box;
}


.seasonEfficiencyStat strong {
    color: white;

    font-size: 19px;
}



/* ============================================================ */
/* DRAFT STOCK */
/* ============================================================ */

.draftStockBox {
    margin-top: 20px;

    padding: 22px;

    text-align: center;

    background-color: #202020;

    border: 1px solid #3a3a3a;

    border-radius: 10px;

    box-sizing: border-box;
}


.draftStockBox span {
    display: block;

    margin-bottom: 6px;

    color: #888888;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 0.5px;
}


.draftStockBox strong {
    display: block;

    margin-bottom: 7px;

    color: #ff7a00;

    font-size: 25px;
}


.draftStockBox p {
    margin: 0;

    color: #999999;

    font-size: 13px;
}



/* ============================================================ */
/* HIDDEN */
/* ============================================================ */

.hiddenDraftSection {
    display: none !important;
}

/* ============================================================ */
/* BREAKOUT SKILLS RESPONSIVE GRID */
/* ============================================================ */

@media (max-width: 1500px) {

    .draftBoostSkillGrid {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 1150px) {

    .draftBoostSkillGrid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 780px) {

    .draftBoostSkillGrid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 520px) {

    .draftBoostSkillGrid {
        grid-template-columns:
            1fr;
    }

}

/* ============================================================ */
/* RESPONSIVE */
/* ============================================================ */


@media (max-width: 600px) {

    .draftPlayerSummary {
        flex-direction: column;

        align-items: flex-start;
    }


    .draftSummaryRatings {
        width: 100%;
    }


    .draftSummaryRating {
        flex: 1;
    }


    .draftSectionHeader {
        flex-direction: column;
    }


    .seasonStatsGrid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .seasonEfficiencyGrid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}



/* ============================================================ */
/* DRAFT NIGHT */
/* ============================================================ */

#draftNightScreen {
    width: min(1180px, 100%);

    margin: 0 auto;

    padding: 25px 0 55px;

    box-sizing: border-box;

    text-align: left;
}


.draftNightHeader {
    margin-bottom: 26px;

    text-align: center;
}


.draftNightEyebrow,
.draftNightSmallLabel {
    display: block;

    color: #ff9138;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 1.2px;
}


.draftNightHeader h1 {
    margin: 9px 0 8px;

    color: #ffffff;

    font-size: 48px;

    line-height: 1.05;
}


.draftNightHeader p {
    margin: 0;

    color: #999999;

    font-size: 15px;
}


.draftNightPlayerCard,
.draftOverviewCard,
.draftBoardSection {
    background-color: #181818;

    border: 1px solid #303030;

    border-radius: 13px;

    box-sizing: border-box;
}


.draftNightPlayerCard {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    min-height: 115px;

    padding: 21px 23px;
}


.draftNightPlayerIdentity h2 {
    margin: 7px 0 4px;

    color: #ffffff;

    font-size: 25px;
}


.draftNightPlayerIdentity p {
    margin: 0;

    color: #999999;

    font-size: 14px;
}


.draftNightPlayerRatings {
    display: flex;

    gap: 9px;
}


.draftNightRating {
    min-width: 76px;

    padding: 10px 14px;

    background-color: #222222;

    border: 1px solid #363636;

    border-radius: 9px;

    box-sizing: border-box;

    text-align: center;
}


.draftNightRating span,
.draftOverviewCard > span {
    display: block;

    color: #909090;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 0.6px;
}


.draftNightRating strong {
    display: block;

    margin-top: 4px;

    color: #ff7a00;

    font-size: 25px;

    line-height: 1;
}


.draftNightOverview {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 13px;

    margin: 15px 0;
}


.draftOverviewCard {
    min-height: 106px;

    padding: 19px 18px;
}


.draftOverviewCard > strong {
    display: block;

    margin-top: 9px;

    color: #ffffff;

    font-size: 18px;

    line-height: 1.2;
}


.draftOverviewCard > p {
    margin: 5px 0 0;

    color: #939393;

    font-size: 12px;

    line-height: 1.4;
}


.draftOverviewProjection {
    background:
        linear-gradient(
            135deg,
            #231a14,
            #181818 75%
        );

    border-color: #60432c;
}


.draftOverviewProjection > strong {
    color: #ff9138;
}


.draftBoardSection {
    padding: 22px;
}


.draftBoardHeader {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 21px;
}


.draftBoardHeader h2 {
    margin: 7px 0 5px;

    font-size: 25px;
}


.draftBoardHeader p {
    margin: 0;

    color: #939393;

    font-size: 13px;
}


.draftRoundFilters {
    display: flex;

    gap: 7px;
}


.draftRoundFilter {
    margin: 0;

    padding: 9px 12px;

    color: #adadad;

    background-color: #232323;

    border: 1px solid #363636;

    border-radius: 7px;

    filter: none;

    font-size: 11px;

    text-shadow: none;

    white-space: nowrap;
}


.draftRoundFilter:hover {
    color: #ffffff;

    background-color: #2d2d2d;
}


.draftRoundFilter.activeDraftRoundFilter {
    color: #ffad6b;

    background-color: #342418;

    border-color: #a8571a;
}


.draftBoardColumnLabels,
.draftBoardRow {
    display: grid;

    grid-template-columns: 72px minmax(0, 1fr) 140px 132px;

    align-items: center;

    gap: 15px;
}


.draftBoardColumnLabels {
    padding: 0 15px 11px;

    border-bottom: 1px solid #333333;

    color: #878787;

    font-size: 14px;

    font-weight: bold;

    letter-spacing: 0.5px;
}


.draftRoundDivider {
    padding: 17px 15px 9px;

    color: #bdbdbd;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 0.7px;
}


.draftBoardRow {
    min-height: 69px;

    margin-bottom: 6px;

    padding: 9px 15px;

    background-color: #202020;

    border: 1px solid #2e2e2e;

    border-radius: 9px;

    box-sizing: border-box;
}


.draftBoardRowInRange {
    background:
        linear-gradient(
            90deg,
            #302116,
            #202020 42%
        );

    border-color: #6e462a;
}


.draftBoardPickNumber {
    color: #ff9138;

    font-size: 20px;

    font-weight: bold;

    font-variant-numeric: tabular-nums;
}


.draftBoardTeam {
    display: flex;

    align-items: center;

    gap: 11px;

    min-width: 0;
}


.draftTeamBadge {
    width: 39px;

    height: 39px;

    flex: 0 0 39px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    color: var(--team-color);

    background-color: #232323;

    border: 1px solid var(--team-color);

    border-radius: 9px;

    font-size: 12px;

    font-weight: bold;

    box-sizing: border-box;
}

.draftTeamBadge img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: contain;
}


.draftBoardTeam > div:last-child {
    min-width: 0;
}


.draftBoardTeam strong,
.draftBoardTeam span {
    display: block;
}


.draftBoardTeam strong {
    overflow: hidden;

    color: #f3f3f3;

    font-size: 13px;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.draftBoardTeam span {
    margin-top: 4px;

    color: #8e8e8e;

    font-size: 13px;
}


.draftBoardRecord {
    color: #e3e3e3;

    font-size: 14px;

    font-weight: bold;

    font-variant-numeric: tabular-nums;
}


.draftPickStatus {
    justify-self: start;

    padding: 6px 8px;

    border: 1px solid transparent;

    border-radius: 6px;

    font-size: 9px;

    font-weight: bold;

    letter-spacing: 0.2px;

    white-space: nowrap;
}


.yourDraftRangeStatus {
    color: #ffad6b;

    background-color: #382516;

    border-color: #765030;
}


.lotteryWinnerStatus {
    color: #93d9b4;

    background-color: #183026;

    border-color: #305843;
}


.standardDraftStatus {
    color: #aaaaaa;

    background-color: #292929;

    border-color: #383838;
}


@media (max-width: 850px) {

    .draftNightOverview {
        grid-template-columns: 1fr;
    }


    .draftOverviewCard {
        min-height: unset;
    }


    .draftBoardHeader {
        flex-direction: column;

        align-items: flex-start;
    }


    .draftBoardColumnLabels,
    .draftBoardRow {
        grid-template-columns: 51px minmax(0, 1fr) 85px;

        gap: 10px;
    }


    .draftBoardColumnLabels > span:last-child,
    .draftPickStatus {
        display: none;
    }

}


@media (max-width: 600px) {

    body:has(#draftNightScreen) {
        padding-right: 14px;

        padding-left: 14px;
    }


    #draftNightScreen {
        padding-top: 12px;
    }


    .draftNightHeader h1 {
        font-size: 39px;
    }


    .draftNightPlayerCard {
        align-items: flex-start;

        flex-direction: column;

        padding: 18px;
    }


    .draftNightPlayerRatings {
        width: 100%;
    }


    .draftNightRating {
        flex: 1;
    }


    .draftBoardSection {
        padding: 16px 11px;
    }


    .draftRoundFilters {
        width: 100%;
    }


    .draftRoundFilter {
        flex: 1;

        padding-right: 7px;

        padding-left: 7px;
    }


    .draftBoardColumnLabels,
    .draftBoardRow {
        grid-template-columns: 38px minmax(0, 1fr) 58px;

        gap: 8px;

        padding-right: 8px;

        padding-left: 8px;
    }


    .draftBoardColumnLabels {
        font-size: 8px;
    }


    .draftBoardColumnLabels > span:nth-child(3) {
        font-size: 0;
    }


    .draftBoardColumnLabels > span:nth-child(3)::after {
        content: "RECORD";

        font-size: 8px;
    }


    .draftBoardPickNumber {
        font-size: 16px;
    }


    .draftBoardTeam {
        gap: 8px;
    }


    .draftTeamBadge {
        width: 33px;

        height: 33px;

        flex-basis: 33px;

        font-size: 10px;
    }


    .draftBoardTeam strong {
        font-size: 11px;
    }


    .draftBoardTeam span {
        font-size: 9px;
    }


    .draftBoardRecord {
        font-size: 12px;
    }

}

/* ============================================================ */
/* DRAFT ACTION BUTTONS */
/* ============================================================ */

.draftActionPanel {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 15px;

    padding: 22px;

    background-color: #181818;

    border: 1px solid #303030;

    border-radius: 12px;

    text-align: left;

}

.draftActionInformation h2 {

    margin: 8px 0 6px;

    font-size: 22px;

}

.draftActionInformation p {

    margin: 0;

    color: #999999;

    font-size: 13px;

}

.draftActionButtons {

    display: flex;

    gap: 10px;

}

.draftStartActionButton,
.draftJumpActionButton {

    margin: 0;

    padding: 12px 16px;

    font-size: 13px;

    filter: none;

    text-shadow: none;

    white-space: nowrap;

}

.draftJumpActionButton {

    background-color: #252525;

    border: 1px solid #404040;

}

.draftJumpActionButton:hover {

    background-color: #303030;

}

.draftStartActionButton:disabled,
.draftJumpActionButton:disabled {

    opacity: 0.45;

    cursor: default;

}


/* ============================================================ */
/* THREE TEAM OPTIONS */
/* ============================================================ */

.draftTeamChoiceSection {

    margin-bottom: 15px;

    padding: 22px;

    background-color: #181818;

    border: 1px solid #303030;

    border-radius: 12px;

    text-align: left;

}

.draftTeamChoiceHeader h2 {

    margin: 8px 0 6px;

    font-size: 23px;

}

.draftTeamChoiceHeader p {

    margin: 0 0 20px;

    color: #999999;

    font-size: 13px;

}

.draftTeamChoiceCards {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;

}

.draftChoiceCard {

    min-width: 0;

    margin: 0;

    padding: 17px;

    background-color: #222222;

    border: 1px solid #3b3b3b;

    border-radius: 10px;

    filter: none;

    text-align: left;

    text-shadow: none;

    transition:

        transform 0.15s ease,

        border-color 0.15s ease,

        background-color 0.15s ease;

}

.draftChoiceCard:hover:not(:disabled) {

    background-color: #282828;

    border-color: #737373;

    transform: translateY(-2px);

}

.draftChoiceCard.selectedDraftChoiceCard {

    background:
        linear-gradient(
            145deg,
            #342416,
            #222222
        );

    border-color: #ff7a00;

}

.draftChoiceCardTop span {
    color:
        #ff9238;

    font-size:
        14px;

    font-weight:
        950;

    letter-spacing:
        0.15px;
}


.draftChoiceCardTop small {
    color:
        #a0a0a0;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        0.4px;
}

.draftChoiceCard h3 {

    margin: 19px 0 5px;

    color: var(
        --offer-team-color,
        #ffffff
    );

    font-size: 18px;

}

.draftChoiceTeamRecord {

    margin: 0 0 20px;

    color: #999999;

    font-size: 11px;

}

.draftChoiceMetric {

    display: flex;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 12px;

}

.draftChoiceMetric span {

    color: #999999;

    font-size: 10px;

}

.draftChoiceMetric strong {

    color: #ffffff;

    font-size: 11px;

    text-align: right;

}

.draftChoiceMetric strong.draftChoiceMinutes {

    color: #ff9b50;

}

.draftChoiceDescription {

    min-height: 52px;

    margin: 15px 0 0;

    color: #aaaaaa;

    font-size: 11px;

    font-weight: normal;

    line-height: 1.5;

}

#confirmDraftTeamButton {

    margin: 20px auto 0;

}

.draftTeamChoiceResult {

    margin-top: 20px;

    padding: 20px;

    background-color: #202020;

    border: 1px solid #ff7a00;

    border-radius: 10px;

    text-align: center;

}

.draftTeamChoiceResult span {

    color: #999999;

    font-size: 10px;

}

.draftTeamChoiceResult h3 {

    margin: 8px 0;

    color: #ff7a00;

    font-size: 23px;

}

.draftTeamChoiceResult p {

    margin: 0;

    color: #bbbbbb;

    font-size: 13px;

}

.completedDraftChoicePick {

    opacity: 0.62;

}

.teamOfferDraftChoicePick {

    border-color: #ff7a00;

}


/* ============================================================ */
/* SMALLER SCREENS */
/* ============================================================ */

@media (max-width: 900px) {

    .draftActionPanel {

        flex-direction: column;

        align-items: flex-start;

    }

    .draftActionButtons {

        width: 100%;

    }

    .draftStartActionButton,
    .draftJumpActionButton {

        flex: 1;

    }

    .draftTeamChoiceCards {

        grid-template-columns: 1fr;

    }

}

/* ============================================================ */
/* PLAYERS SELECTED DURING THE DRAFT */
/* ============================================================ */

.draftedProspectName {

    display: block;

    margin-top: 5px;

    color: #dddddd;

    font-size: 11px;

    font-weight: bold;

}

.draftedUserProspect {

    color: #ff9b50;

}

/* ============================================================ */
/* DRAFT TEAM OFFER POPUP */
/* ============================================================ */

.draftTeamChoiceSection {
    position: fixed;

    top: 50%;
    left: 50%;

    z-index: 1000;

    width: min(
        900px,
        calc(100vw - 32px)
    );

    max-height: calc(
        100vh - 48px
    );

    overflow-y: auto;

    margin: 0;

    padding: 22px;

    background-color: #181818;

    border: 1px solid #383838;

    border-radius: 16px;

    box-sizing: border-box;

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

    box-shadow:
        0 0 0 100vmax rgba(
            0,
            0,
            0,
            0.76
        ),
        0 18px 50px rgba(
            0,
            0,
            0,
            0.45
        );
}


.draftTeamChoiceHeader {
    margin-bottom: 22px;
}


.draftTeamChoiceHeader h2 {
    margin: 8px 0;

    color: white;

    font-size: 28px;
}


.draftTeamChoiceHeader p {
    margin: 0;

    color: #999999;

    line-height: 1.5;
}


.draftTeamChoiceCards,
#draftTeamOffersGrid {
    display: grid;

    grid-template-columns:
        1fr;

    gap:
        10px;
}


.draftChoiceCard {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    column-gap: 12px;
    row-gap: 0;

    margin: 0;

    /* MUCH SMALLER */
    padding: 15px 17px;

    color: white;

    background:
        linear-gradient(
            145deg,
            #242424,
            #1e1e1e
        );

    border:
        1px solid #414141;

    border-radius:
        11px;

    box-sizing:
        border-box;

    cursor:
        pointer;

    text-align:
        left;

    text-shadow:
        none;

    filter:
        none;

    box-shadow:
        0 4px 12px
        rgba(
            0,
            0,
            0,
            0.16
        );

    transition:
        border-color 0.18s ease,
        transform 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}


.draftChoiceCard:hover:not(:disabled):not(.selectedDraftChoiceCard) {
    background:
        linear-gradient(
            145deg,
            #292929,
            #222222
        );

    border-color:
        #686868;

    transform:
        translateY(-2px);

    box-shadow:
        0 9px 22px
        rgba(
            0,
            0,
            0,
            0.26
        );
}


.draftChoiceCard.selectedDraftChoiceCard {
    background:
        linear-gradient(
            145deg,
            #342419,
            #251d17
        );

    border:
        2px solid
        #ff7a00;

    box-shadow:
        0 0 0 1px
        rgba(
            255,
            122,
            0,
            0.10
        ),
        0 8px 22px
        rgba(
            0,
            0,
            0,
            0.28
        );
}

.draftChoiceCard.selectedDraftChoiceCard:hover:not(:disabled) {
    border-color:
        #ff8b27;

    transform:
        translateY(-2px);
}

.draftChoiceCardTop {
    grid-column:
        1 / -1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-bottom:
        9px;
}


.draftChoiceCard h3 {
    grid-column:
        1 / -1;

    margin:
        0 0 4px;

    color:
        #ffffff;

    font-size:
        22px;

    font-weight:
        950;

    line-height:
        1.05;

    letter-spacing:
        -0.35px;
}

.draftChoiceTeamRecord {
    grid-column:
        1 / -1;

    margin:
        0 0 13px;

    color:
        #a8a8a8;

    font-size:
        12px;

    font-weight:
        800;

    line-height:
        1.2;
}


.draftChoiceTeamRecord span {
    margin:
        0 4px;

    color:
        #666666;
}

.draftChoiceMetric {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        center;

    gap:
        5px;

    margin:
        0;

    /* WAS 14px 16px */
    padding:
        10px 12px;

    min-height:
        58px;

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );

    border:
        1px solid
        #353535;

    border-radius:
        8px;

    box-sizing:
        border-box;
}


.draftChoiceMetric span {
    display:
        block;

    margin:
        0;

    color:
        #909090;

    font-size:
        9px;

    font-weight:
        950;

    line-height:
        1;

    letter-spacing:
        0.65px;
}


.draftChoiceMetric strong {
    display:
        block;

    color:
        #ffffff;

    font-size:
        15px;

    font-weight:
        950;

    line-height:
        1.1;
}


.draftChoiceMinutes {
    color:
        #ff8520 !important;

    font-size:
        18px !important;
}


#confirmDraftTeamButton {
    margin-top: 24px;
}


@media (
    max-width: 760px
) {

    .draftTeamChoiceCards {
        grid-template-columns:
            1fr;
    }

    .draftTeamChoiceSection {
        padding: 20px;
    }

}

@media (
    max-width: 800px
) {

    .draftChoiceCard {
        grid-template-columns:
            1fr;
    }


    .draftChoiceMetric {
        margin-bottom:
            8px;
    }


    .draftChoiceMetric:last-child {
        margin-bottom:
            0;
    }

}

/* BIG, CENTERED DRAFTED PLAYER NAMES */

.draftBoardRow {
    position: relative;
    min-height: 84px;
}

.draftBoardTeam {
    max-width: 260px;
}

.draftBoardTeam span.draftedProspectName {
    position: absolute;

    top: 50%;
    left: 50%;

    width: min(42%, 380px);

    margin: 0;

    color: #f6f6f6;

    font-size: 21px;
    font-weight: 800;

    letter-spacing: 0.2px;
    line-height: 1.15;

    text-align: center;
    white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;

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

    pointer-events: none;
    z-index: 1;
}

/* Highlight your player */

.draftBoardTeam span.draftedUserProspect {
    color: #ffad6b;
    text-shadow: 0 0 14px rgba(255, 122, 0, 0.22);
}

/* Tablets */

@media (max-width: 850px) {

    .draftBoardRow {
        min-height: 96px;

        align-items: start;

        padding-top: 13px;
        padding-bottom: 33px;
    }

    .draftBoardTeam {
        max-width: none;
    }

    .draftBoardTeam span.draftedProspectName {
        top: auto;
        bottom: 10px;
        left: 50%;

        width: calc(100% - 30px);

        font-size: 17px;

        transform: translateX(-50%);
    }

}

/* Phones */

@media (max-width: 600px) {

    .draftBoardTeam span.draftedProspectName {
        font-size: 15px;
    }

}

.positionSelectionWarning {
    width: 100%;
    max-width: 320px;

    margin: 0 auto 10px auto;
    padding: 10px 14px;

    color: #ff7777;

    background-color: rgba(255, 80, 80, 0.08);

    border: 1px solid rgba(255, 80, 80, 0.28);
    border-radius: 8px;

    box-sizing: border-box;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;

    text-align: center;
}

/* =========================================================
   BASKETBALL CAREER — HOME PAGE
   ========================================================= */

body.homePage {
    min-height: 100vh;

    margin: 0;

    overflow-x: hidden;

    background:
        #101010;

    color:
        #ffffff;
}


/* =========================================================
   MAIN HOME AREA
   ========================================================= */

.careerHome {
    position: relative;

    min-height:
        calc(100vh - 70px);

    overflow: hidden;

    padding:
        62px 48px 42px;

    box-sizing:
        border-box;
}


/* =========================================================
   COURT BACKGROUND
   ========================================================= */

.careerHomeCourt {
    position: absolute;

    inset:
        0;

    pointer-events:
        none;

    opacity:
        0.075;
}


.careerHomeCourt::before {
    content:
        "";

    position:
        absolute;

    width:
        720px;

    height:
        720px;

    top:
        50%;

    left:
        -350px;

    transform:
        translateY(-50%);

    border:
        2px solid
        rgba(
            255,
            255,
            255,
            0.7
        );

    border-radius:
        50%;
}


.careerHomeCourt::after {
    content:
        "";

    position:
        absolute;

    top:
        0;

    bottom:
        0;

    left:
        50%;

    width:
        1px;

    background:
        rgba(
            255,
            255,
            255,
            0.55
        );
}


/* =========================================================
   AMBIENT ORANGE GLOW
   ========================================================= */

.careerHomeGlow {
    position: absolute;

    pointer-events:
        none;

    border-radius:
        50%;

    filter:
        blur(80px);
}


.careerHomeGlowOne {
    width:
        420px;

    height:
        420px;

    top:
        100px;

    left:
        12%;

    background:
        rgba(
            255,
            119,
            0,
            0.08
        );
}


.careerHomeGlowTwo {
    width:
        380px;

    height:
        380px;

    right:
        5%;

    bottom:
        40px;

    background:
        rgba(
            255,
            119,
            0,
            0.05
        );
}


/* =========================================================
   HERO
   ========================================================= */

.careerHomeHero {
    position: relative;

    z-index:
        2;

    width:
        min(
            1320px,
            100%
        );

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(430px, 0.8fr);

    align-items:
        center;

    gap:
        72px;
}


/* =========================================================
   LEFT HERO COPY
   ========================================================= */

.careerHomeHeroCopy {
    min-width:
        0;
}


.careerHomeEyebrow {
    display:
        block;

    color:
        #ff8417;

    font-size:
        12px;

    font-weight:
        950;

    line-height:
        1;

    letter-spacing:
        1.8px;

    text-transform:
        uppercase;
}


.careerHomeHeroCopy h1 {
    max-width:
        670px;

    margin:
        18px 0 24px;

    color:
        #ffffff;

    font-size:
        clamp(
            64px,
            6.2vw,
            100px
        );

    font-weight:
        950;

    line-height:
        0.87;

    letter-spacing:
        -4px;
}


.careerHomeHeroCopy h1 span {
    display:
        block;

    color:
        #ff7a00;
}


.careerHomeLead {
    max-width:
        610px;

    margin:
        0;

    color:
        #b2b2b2;

    font-size:
        18px;

    font-weight:
        650;

    line-height:
        1.65;
}


/* =========================================================
   PRIMARY ACTION
   ========================================================= */

.careerHomePrimaryActions {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-top:
        34px;
}


.careerHomeNewButton,
.careerHomeContinueButton {
    appearance:
        none;

    border:
        0;

    font-family:
        inherit;

    cursor:
        pointer;
}


.careerHomeNewButton {
    min-width:
        238px;

    height:
        62px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    padding:
        0 20px 0 24px;

    color:
        #ffffff;

    background:
        linear-gradient(
            180deg,
            #ff8b16,
            #f27400
        );

    border:
        1px solid
        #ff9a38;

    border-radius:
        9px;

    box-shadow:
        0 12px 30px
        rgba(
            0,
            0,
            0,
            0.28
        );

    transition:
        transform 0.15s ease,
        filter 0.15s ease;
}


.careerHomeNewButton:hover {
    transform:
        translateY(-2px);

    filter:
        brightness(1.08);
}


.careerHomeNewButton span {
    font-size:
        14px;

    font-weight:
        950;

    letter-spacing:
        0.3px;
}


.careerHomeNewButton strong {
    font-size:
        24px;

    font-weight:
        900;
}


/* =========================================================
   HERO FEATURES
   ========================================================= */

.careerHomeFeatureLine {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-top:
        26px;

    color:
        #727272;

    font-size:
        11px;

    font-weight:
        850;

    letter-spacing:
        0.5px;

    text-transform:
        uppercase;
}


.careerHomeFeatureLine i {
    width:
        4px;

    height:
        4px;

    flex:
        0 0 4px;

    background:
        #ff7a00;

    border-radius:
        50%;
}


/* =========================================================
   SAVE COLUMN
   ========================================================= */

.careerHomeSaveColumn {
    min-width:
        0;
}


/* =========================================================
   SAVE CARD
   ========================================================= */

.careerHomeSaveCard {
    position:
        relative;

    min-height:
        410px;

    padding:
        26px;

    overflow:
        hidden;

    box-sizing:
        border-box;

    background:
        linear-gradient(
            145deg,
            rgba(
                33,
                33,
                33,
                0.98
            ),
            rgba(
                21,
                21,
                21,
                0.98
            )
        );

    border:
        1px solid
        #363636;

    border-radius:
        15px;

    box-shadow:
        0 20px 55px
        rgba(
            0,
            0,
            0,
            0.38
        );
}


.careerHomeSaveCard::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        3px;

    background:
        linear-gradient(
            90deg,
            #ff7600,
            #ff9b35 35%,
            transparent 82%
        );
}


.careerHomeCardEyebrow {
    color:
        #888888;

    font-size:
        10px;

    font-weight:
        950;

    letter-spacing:
        1.15px;

    text-transform:
        uppercase;
}


.careerHomeSaveTop {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;
}


.careerHomeSaveTop > div:first-child {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        11px;
}


/* =========================================================
   PHASE
   ========================================================= */

.careerHomePhaseBadge {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        27px;

    padding:
        0 10px;

    color:
        #ff9b48;

    background:
        #2d2118;

    border:
        1px solid
        #5d3b20;

    border-radius:
        5px;

    font-size:
        10px;

    font-weight:
        950;

    letter-spacing:
        0.55px;
}


/* =========================================================
   TEAM LOGO
   ========================================================= */

.careerHomeTeamLogo {
    width:
        150px;

    height:
        150px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 76px;
}


.careerHomeTeamLogo img {
    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    filter:
        drop-shadow(
            0 8px 12px
            rgba(
                0,
                0,
                0,
                0.32
            )
        );
}


/* =========================================================
   PLAYER IDENTITY
   ========================================================= */

.careerHomePlayerIdentity {
    display:
        grid;

    grid-template-columns:
        94px
        minmax(0, 1fr);

    align-items:
        center;

    gap:
        20px;

    margin-top:
        29px;
}


.careerHomeOverall {
    width:
        94px;

    height:
        94px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    box-sizing:
        border-box;

    background:
        #241b14;

    border:
        2px solid
        #77451f;

    border-radius:
        11px;
}


.careerHomeOverall span {
    margin-bottom:
        5px;

    color:
        #a5a5a5;

    font-size:
        10px;

    font-weight:
        950;

    letter-spacing:
        1px;
}


.careerHomeOverall strong {
    color:
        #ff8520;

    font-size:
        48px;

    font-weight:
        950;

    line-height:
        0.9;
}


.careerHomePlayerText {
    min-width:
        0;
}


.careerHomePlayerText h2 {
    margin:
        0;

    overflow:
        hidden;

    color:
        #ffffff;

    font-size:
        31px;

    font-weight:
        950;

    line-height:
        1.05;

    letter-spacing:
        -0.6px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.careerHomePlayerText p {
    margin:
        9px 0 0;

    color:
        #a7a7a7;

    font-size:
        14px;

    font-weight:
        750;
}


/* =========================================================
   SAVE STATS
   ========================================================= */

.careerHomeSaveStats {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    margin-top:
        28px;

    border-top:
        1px solid
        #343434;

    border-bottom:
        1px solid
        #343434;
}


.careerHomeSaveStats > div {
    padding:
        18px 12px;

    text-align:
        center;

    border-right:
        1px solid
        #343434;
}


.careerHomeSaveStats > div:last-child {
    border-right:
        0;
}


.careerHomeSaveStats span {
    display:
        block;

    margin-bottom:
        7px;

    color:
        #777777;

    font-size:
        9px;

    font-weight:
        950;

    letter-spacing:
        0.8px;
}


.careerHomeSaveStats strong {
    display:
        block;

    color:
        #ffffff;

    font-size:
        22px;

    font-weight:
        950;

    line-height:
        1;
}


/* =========================================================
   CONTINUE BUTTON
   ========================================================= */

.careerHomeContinueButton {
    width:
        100%;

    min-height:
        57px;

    margin-top:
        24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0 18px 0 20px;

    color:
        #ffffff;

    background:
        #ff7a00;

    border:
        1px solid
        #ff9837;

    border-radius:
        8px;

    transition:
        filter 0.15s ease,
        transform 0.15s ease;
}


.careerHomeContinueButton:hover {
    filter:
        brightness(1.08);

    transform:
        translateY(-1px);
}


.careerHomeContinueButton span {
    font-size:
        14px;

    font-weight:
        950;
}


.careerHomeContinueButton strong {
    font-size:
        22px;
}


/* =========================================================
   LOADING / NO SAVE
   ========================================================= */

.careerHomeLoadingCard,
.careerHomeNoSaveCard {
    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    text-align:
        center;
}


.careerHomeLoadingCard strong {
    margin-top:
        14px;

    color:
        #ffffff;

    font-size:
        22px;

    font-weight:
        900;
}


.careerHomeNoSaveIcon {
    width:
        74px;

    height:
        74px;

    margin:
        26px 0 18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #ff8220;

    background:
        #251c16;

    border:
        2px solid
        #73431f;

    border-radius:
        50%;

    font-size:
        22px;

    font-weight:
        950;
}


.careerHomeNoSaveCard h2 {
    margin:
        0;

    font-size:
        27px;

    font-weight:
        950;
}


.careerHomeNoSaveCard p {
    max-width:
        330px;

    margin:
        13px auto 0;

    color:
        #929292;

    font-size:
        14px;

    font-weight:
        650;

    line-height:
        1.5;
}


/* =========================================================
   HIDDEN
   ========================================================= */

.careerHomeHidden {
    display:
        none !important;
}


/* =========================================================
   ROADMAP
   ========================================================= */

.careerHomeRoadmap {
    position:
        relative;

    z-index:
        2;

    width:
        min(
            1320px,
            100%
        );

    margin:
        70px auto 0;

    padding-top:
        28px;

    border-top:
        1px solid
        #2d2d2d;
}


.careerHomeRoadmapHeading {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        23px;
}


.careerHomeRoadmapHeading h2 {
    margin:
        9px 0 0;

    color:
        #ffffff;

    font-size:
        25px;

    font-weight:
        950;

    letter-spacing:
        -0.3px;
}


.careerHomeRoadmapHeading > p {
    max-width:
        400px;

    margin:
        0;

    color:
        #767676;

    font-size:
        12px;

    font-weight:
        650;

    line-height:
        1.45;

    text-align:
        right;
}


/* =========================================================
   ROADMAP GRID
   ========================================================= */

.careerHomeRoadmapGrid {
    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        12px;
}


.careerHomeRoadmapCard {
    position:
        relative;

    min-height:
        190px;

    padding:
        20px;

    overflow:
        hidden;

    background:
        rgba(
            24,
            24,
            24,
            0.86
        );

    border:
        1px solid
        #303030;

    border-radius:
        10px;
}


.careerHomeRoadmapCard::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        0;

    height:
        2px;

    background:
        #ff7a00;

    transition:
        width 0.2s ease;
}


.careerHomeRoadmapCard:hover::after {
    width:
        100%;
}


.careerHomeRoadmapNumber {
    color:
        #666666;

    font-size:
        10px;

    font-weight:
        950;

    letter-spacing:
        0.8px;
}


.careerHomeRoadmapIcon {
    width:
        34px;

    height:
        34px;

    margin:
        20px 0 15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #ff8520;

    background:
        #281d15;

    border:
        1px solid
        #57361f;

    border-radius:
        7px;

    font-size:
        18px;

    font-weight:
        950;
}


.careerHomeRoadmapCard h3 {
    margin:
        0;

    color:
        #ffffff;

    font-size:
        17px;

    font-weight:
        900;
}


.careerHomeRoadmapCard p {
    margin:
        9px 0 0;

    color:
        #858585;

    font-size:
        12px;

    font-weight:
        650;

    line-height:
        1.45;
}


/* =========================================================
   LOGO RAIL
   ========================================================= */

.careerHomeLogoRail {
    position:
        relative;

    z-index:
        1;

    width:
        min(
            1320px,
            100%
        );

    height:
        74px;

    margin:
        35px auto -20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    overflow:
        hidden;

    opacity:
        0.18;

    filter:
        grayscale(0.55);
}


.careerHomeLogoRail img {
    width:
        56px;

    height:
        56px;

    flex:
        0 0 56px;

    object-fit:
        contain;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .careerHome {
        padding:
            42px 28px 38px;
    }


    .careerHomeHero {
        grid-template-columns:
            1fr;

        gap:
            42px;
    }


    .careerHomeHeroCopy {
        max-width:
            760px;
    }


    .careerHomeHeroCopy h1 {
        font-size:
            clamp(
                62px,
                10vw,
                90px
            );
    }


    .careerHomeSaveColumn {
        max-width:
            620px;
    }


    .careerHomeRoadmapGrid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .careerHome {
        padding:
            32px 16px 30px;
    }


    .careerHomeHeroCopy h1 {
        margin-top:
            14px;

        font-size:
            56px;

        letter-spacing:
            -2.5px;
    }


    .careerHomeLead {
        font-size:
            15px;
    }


    .careerHomeNewButton {
        width:
            100%;
    }


    .careerHomeFeatureLine {
        flex-wrap:
            wrap;
    }


    .careerHomeSaveCard {
        min-height:
            0;

        padding:
            20px;
    }


    .careerHomePlayerIdentity {
        grid-template-columns:
            76px
            minmax(0, 1fr);

        gap:
            14px;
    }


    .careerHomeOverall {
        width:
            76px;

        height:
            76px;
    }


    .careerHomeOverall strong {
        font-size:
            38px;
    }


    .careerHomePlayerText h2 {
        font-size:
            24px;
    }


    .careerHomeRoadmapHeading {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .careerHomeRoadmapHeading > p {
        text-align:
            left;
    }


    .careerHomeRoadmapGrid {
        grid-template-columns:
            1fr;
    }


    .careerHomeLogoRail {
        justify-content:
            flex-start;
    }

}

/* ============================================================ */
/* DRAFT NIGHT TEAM LOGOS */
/* ============================================================ */

.draftTeamBadge,
.draftOfferTeamBadge {
    display: flex;

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

    overflow: hidden;

    box-sizing: border-box;
}


.draftTeamLogoImage,
.draftTeamBadge img,
.draftOfferTeamBadge img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    object-position: center;

    margin: 0;
    padding: 0;
}

@media (max-width: 900px) {

    .draftSectionHeader {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            auto;

        align-items: start;

        gap: 18px;
    }


    .draftSectionHeader > div:first-child {
        min-width: 0;
    }


    .boostSelectionCount {
        min-width: 88px;

        padding: 10px 14px;

        font-size: 21px;
    }

}


@media (max-width: 620px) {

    .draftSectionHeader {
        grid-template-columns:
            1fr;
    }


    .boostSelectionCount {
        justify-self: start;
    }

}

/* ============================================================
   PLAYER BUILDER — RESPONSIVE DESKTOP / WINDOWED LAYOUT
   KEEP THIS AT THE VERY BOTTOM OF style.css
   ============================================================ */


/* ============================================================
   BASE PLAYER BUILDER WIDTH
   ============================================================ */

#playerDetailsScreen {
    width:
        min(
            1160px,
            calc(100% - 36px)
        );

    max-width:
        1160px;

    margin:
        0 auto;

    box-sizing:
        border-box;
}


/* ============================================================
   HEADER
   ============================================================ */

#playerDetailsScreen > h1 {
    font-size:
        clamp(
            34px,
            4vw,
            48px
        );

    line-height:
        1.05;

    text-align:
        center;
}


#playerDetailsScreen .createDescription {
    width:
        min(
            700px,
            100%
        );

    font-size:
        clamp(
            14px,
            1.5vw,
            17px
        );

    line-height:
        1.45;

    text-align:
        center;
}


#playerDetailsScreen #playerNamePreview {
    text-align:
        center;
}


/* ============================================================
   POSITION SECTION
   ============================================================ */

#playerDetailsScreen .positionSection {
    width:
        100%;

    max-width:
        none;

    padding:
        22px;

    margin:
        0 0 18px;

    box-sizing:
        border-box;
}


#playerDetailsScreen .positionSection h2 {
    font-size:
        clamp(
            25px,
            2.6vw,
            32px
        );

    text-align:
        center;
}


#playerDetailsScreen
.positionSection
.sectionDescription {
    text-align:
        center;

    margin-bottom:
        18px;
}


/*
   Five positions stay on one row through normal
   laptop / split-window sizes.
*/

#playerDetailsScreen .positionButtons {
    display:
        grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap:
        10px;

    width:
        100%;
}


#playerDetailsScreen
.positionSection
.positionButton {
    width:
        100%;

    min-width:
        0;

    height:
        84px;

    padding:
        10px 8px;

    font-size:
        18px;

    box-sizing:
        border-box;
}


#playerDetailsScreen
.positionSection
.positionButton span {
    margin-top:
        5px;

    font-size:
        11px;

    line-height:
        1.1;

    white-space:
        normal;
}


/* ============================================================
   WEIGHT / HEIGHT / WINGSPAN
   ============================================================ */

/*
   This is the big fix for screenshot #1.

   Instead of:
       Weight     Height
            Wingspan

   keep all three in one responsive row.
*/

#playerDetailsScreen .physicalOptions {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        24px;

    width:
        100%;

    padding:
        20px 18px 24px;

    margin:
        0;

    box-sizing:
        border-box;
}


#playerDetailsScreen .buildOption {
    width:
        100%;

    min-width:
        0;
}


#playerDetailsScreen .buildOption label {
    font-size:
        18px;

    margin-bottom:
        7px;
}


#playerDetailsScreen .sliderValue {
    min-height:
        0;

    margin-bottom:
        10px;

    font-size:
        20px;
}


/* ============================================================
   PLAYER PREVIEW + SKILLS
   ============================================================ */

/*
   DO NOT stack at 980px anymore.

   At normal windowed desktop widths:
       Preview | Skills
*/

#playerDetailsScreen .playerAndSkillsLayout {
    display:
        grid;

    grid-template-columns:
        minmax(
            240px,
            275px
        )
        minmax(
            0,
            1fr
        );

    align-items:
        start;

    gap:
        18px;

    width:
        100%;

    margin:
        22px 0 26px;
}


/* ============================================================
   PREVIEW CARD
   ============================================================ */

#playerDetailsScreen
.playerAndSkillsLayout
.playerPreviewPanel {
    width:
        100%;

    min-width:
        0;

    margin:
        0;

    padding:
        15px;

    box-sizing:
        border-box;
}


#playerDetailsScreen .playerPreviewPanel h2 {
    margin:
        0 0 12px;

    font-size:
        17px;
}


#playerDetailsScreen #playerGraphicWrap {
    min-height:
        330px;

    padding:
        10px;
}


#playerDetailsScreen #playerGraphic {
    width:
        125px;
}


#playerDetailsScreen .playerRatingsSummary {
    gap:
        8px;

    margin-top:
        10px;
}


#playerDetailsScreen .playerRatingCard {
    padding:
        9px 5px;
}


#playerDetailsScreen .playerRatingNumber {
    font-size:
        23px;
}


/* ============================================================
   SKILLS PANEL
   ============================================================ */

#playerDetailsScreen .skillsBrowserPanel {
    width:
        100%;

    min-width:
        0;

    padding:
        18px;

    box-sizing:
        border-box;
}


#playerDetailsScreen .skillsBrowserHeader {
    margin-bottom:
        14px;
}


#playerDetailsScreen .skillsBrowserHeader h2 {
    font-size:
        22px;
}


#playerDetailsScreen .skillsBrowserHeader p {
    font-size:
        13px;
}


#playerDetailsScreen .skillsCategoriesContainer {
    gap:
        8px;
}


#playerDetailsScreen .skillCategorySummary {
    padding:
        11px 12px;
}


#playerDetailsScreen .categorySummaryName {
    font-size:
        15px;
}


#playerDetailsScreen .categorySummaryTop {
    margin-bottom:
        8px;
}


#playerDetailsScreen .categorySummaryStats {
    grid-template-columns:
        58px
        minmax(
            0,
            1fr
        );

    gap:
        10px;
}


/* ============================================================
   CONTINUE AREA
   ============================================================ */

#playerDetailsScreen .continueBuildArea {
    width:
        min(
            760px,
            100%
        );

    margin:
        22px auto 30px;

    gap:
        12px;
}


#playerDetailsScreen .bodyLockWarning {
    justify-content:
        center;

    font-size:
        14px;

    text-align:
        center;
}


#playerDetailsScreen #continueBuildButton {
    width:
        min(
            300px,
            100%
        );

    max-width:
        300px;
}


/* ============================================================
   MEDIUM WINDOW
   ============================================================ */

@media (max-width: 820px) {

    #playerDetailsScreen {
        width:
            calc(100% - 24px);
    }


    #playerDetailsScreen .positionSection {
        padding:
            18px;
    }


    /*
       Still keep all five positions visible,
       but make them tighter.
    */

    #playerDetailsScreen
    .positionButtons {
        gap:
            7px;
    }


    #playerDetailsScreen
    .positionSection
    .positionButton {
        height:
            76px;

        padding:
            8px 4px;

        font-size:
            16px;
    }


    #playerDetailsScreen
    .positionSection
    .positionButton span {
        font-size:
            9px;
    }


    #playerDetailsScreen .physicalOptions {
        gap:
            14px;

        padding-left:
            8px;

        padding-right:
            8px;
    }


    #playerDetailsScreen .buildOption label {
        font-size:
            16px;
    }


    #playerDetailsScreen .sliderValue {
        font-size:
            18px;
    }


    /*
       Preview stays beside Skills here.
    */

    #playerDetailsScreen
    .playerAndSkillsLayout {
        grid-template-columns:
            220px
            minmax(
                0,
                1fr
            );

        gap:
            14px;
    }


    #playerDetailsScreen #playerGraphicWrap {
        min-height:
            300px;
    }


    #playerDetailsScreen #playerGraphic {
        width:
            110px;
    }


    #playerDetailsScreen .skillsBrowserPanel {
        padding:
            14px;
    }

}


/* ============================================================
   ACTUAL MOBILE
   ============================================================ */

@media (max-width: 640px) {

    #playerDetailsScreen {
        width:
            calc(100% - 20px);
    }


    /*
       Positions become 2-column rather than
       microscopic five-column buttons.
    */

    #playerDetailsScreen .positionButtons {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }


    #playerDetailsScreen
    .positionSection
    .positionButton:last-child {
        grid-column:
            1 / -1;
    }


    /*
       Body controls stack only on genuinely
       small screens.
    */

    #playerDetailsScreen .physicalOptions {
        grid-template-columns:
            1fr;

        gap:
            18px;

        padding-left:
            12px;

        padding-right:
            12px;
    }


    /*
       Preview + Skills finally stack here.
    */

    #playerDetailsScreen
    .playerAndSkillsLayout {
        grid-template-columns:
            1fr;
    }


    #playerDetailsScreen
    .playerAndSkillsLayout
    .playerPreviewPanel {
        width:
            min(
                300px,
                100%
            );

        margin:
            0 auto;
    }


    #playerDetailsScreen .skillsBrowserPanel {
        width:
            100%;
    }


    #playerDetailsScreen
    .categoryIndividualSkills {
        grid-template-columns:
            1fr;
    }

}

.skillInfoButton {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
    color: #ff8c1a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    cursor: help;
    flex: 0 0 22px;
    padding: 0;
    margin-left: 8px;
    vertical-align: middle;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.skillInfoButton:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 140, 26, 0.8);
    background: rgba(255, 140, 26, 0.12);
}

.compactSkillName,
.careerDevelopmentSkillNameWrap,
.draftBoostSkillNameRow {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* =========================================================
   SKILL INFORMATION ICON
   ========================================================= */

.skillInfoButton {
    width:
        22px;

    height:
        22px;

    flex:
        0 0 22px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    margin:
        0;

    color:
        #ff8619;

    background:
        rgba(
            255,
            134,
            25,
            0.08
        );

    border:
        1px solid
        rgba(
            255,
            134,
            25,
            0.48
        );

    border-radius:
        50%;

    font-size:
        12px;

    font-weight:
        950;

    line-height:
        1;

    cursor:
        help;

    box-sizing:
        border-box;
}


.skillInfoButton:hover {
    color:
        #ffffff;

    background:
        #ff7b00;

    border-color:
        #ff8a20;
}


.draftBoostSkillNameRow {
    width:
        100%;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        8px;
}


/* =========================================================
   SKILL INFO TOOLTIP
   ========================================================= */

.skillInfoTooltip {
    position:
        fixed;

    z-index:
        999999;

    width:
        min(
            280px,
            calc(100vw - 24px)
        );

    padding:
        13px 14px;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    color:
        #ffffff;

    background:
        #1d1f20;

    border:
        1px solid #484b4e;

    border-radius:
        10px;

    box-shadow:
        0 14px 35px
        rgba(
            0,
            0,
            0,
            0.5
        );

    transition:
        opacity 0.12s ease;

    box-sizing:
        border-box;
}


.skillInfoTooltipVisible {
    opacity:
        1;

    visibility:
        visible;
}


.skillInfoTooltip strong {
    display:
        block;

    margin-bottom:
        6px;

    color:
        #ff8a25;

    font-size:
        13px;

    font-weight:
        950;
}


.skillInfoTooltip p {
    margin:
        0;

    color:
        #c0c2c4;

    font-size:
        12px;

    font-weight:
        650;

    line-height:
        1.45;
}

/* ============================================================
   SKILL INFO ICON
   ============================================================ */

.skillInfoButton {
    width:
        21px;

    height:
        21px;

    flex:
        0 0 21px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    color:
        #ff8a27;

    background:
        rgba(
            255,
            122,
            0,
            0.08
        );

    border:
        1px solid
        rgba(
            255,
            138,
            39,
            0.55
        );

    border-radius:
        50%;

    box-sizing:
        border-box;

    font-size:
        12px;

    font-family:
        Arial,
        sans-serif;

    font-weight:
        900;

    line-height:
        1;

    cursor:
        pointer;

    user-select:
        none;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}


.skillInfoButton:hover,
.skillInfoButton:focus-visible {
    color:
        #ffffff;

    background:
        #ff7a00;

    border-color:
        #ff932f;

    transform:
        translateY(-1px);

    outline:
        none;
}


.skillInfoButton[aria-expanded="true"] {
    color:
        #ffffff;

    background:
        #ff7a00;

    border-color:
        #ff932f;
}



/* ============================================================
   SKILL INFO POPUP
   ============================================================ */

.skillInfoPopup {
    position:
        fixed;

    z-index:
        2147483000;

    width:
        min(
            310px,
            calc(100vw - 24px)
        );

    padding:
        15px 16px;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(-3px);

    pointer-events:
        none;

    color:
        #ffffff;

    background:
        linear-gradient(
            145deg,
            #242627,
            #191b1c
        );

    border:
        1px solid
        #4b4e50;

    border-radius:
        11px;

    box-shadow:
        0 16px 42px
        rgba(
            0,
            0,
            0,
            0.52
        );

    box-sizing:
        border-box;

    transition:
        opacity 0.12s ease,
        transform 0.12s ease,
        visibility 0.12s ease;
}


.skillInfoPopupVisible {
    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);

    pointer-events:
        auto;
}


.skillInfoPopupEyebrow {
    display:
        block;

    margin-bottom:
        5px;

    color:
        #ff8520;

    font-size:
        9px;

    font-weight:
        950;

    line-height:
        1;

    letter-spacing:
        0.8px;
}


.skillInfoPopupTitle {
    display:
        block;

    margin-bottom:
        7px;

    color:
        #ffffff;

    font-size:
        16px;

    font-weight:
        950;

    line-height:
        1.15;
}


.skillInfoPopupDescription {
    margin:
        0;

    color:
        #b7b9bb;

    font-size:
        12px;

    font-weight:
        650;

    line-height:
        1.5;
}



/* ============================================================
   NAME + INFO ICON ALIGNMENT
   ============================================================ */

.careerDevelopmentSkillNameWrap,
.draftBoostSkillNameRow,
.compactSkillNameRow {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    min-width:
        0;
}