/* General container styling */
.scorecard-container {
    background-color: transparent;
    padding: 0cap;
    font-family: "CustomFont", sans-serif; /* Apply custom font */
}

/* Player card styling */
.player-card {
    background-color: transparent;
    font-family: "CustomFont", sans-serif; /* Apply custom font */
    margin-bottom: 0cap;
}

.player-header {
    text-align: center;
}

.player-pic {
    width: clamp(6cap, 10vmax, 20cap);
    object-fit: cover;
    border: 0px solid white;
    margin-right: 2cap;
    box-shadow: inset 0px 0px 24px 12px rgba(0, 0, 0, 1);
    border-radius: 50%; /* Makes the border round */
}

.player-nickname {
    font-size: clamp(2cap, 4vmax, 6cap);
    color: white;
    text-align: center;
    margin: 0;
    padding: 0;
    font-family: "CustomFont", sans-serif; /* Apply custom font */
    white-space: nowrap;
}

.player-name {
    font-size: clamp(0.5cap, 1.5vmax, 3cap);
    color: white;
    text-align: center;
    margin: 0;
    padding: 0;
    font-family: "CustomFont", sans-serif; /* Apply custom font */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fallback font */
}

.player-body {
    text-align: center;
    box-shadow: inset 0px 0px 96px 24px rgba(0, 0, 0, 1);
}

.player-score {
    font-size: clamp(5cap, 8vmax, 20cap);
    color: white;
    text-align: center;
    margin: 0;
    padding: 0;
    font-family: "CustomFont", sans-serif; /* Apply custom font */
}

.player-bf,
.player-rf {
    font-size: clamp(1cap, 2vmax, 5cap);
    color: white;
    text-align: center;
    margin: 0;
    padding: 0;
    font-family: "CustomFont", sans-serif; /* Apply custom font */
}

.player-footer {
    text-align: center;

}

.player-point-btn,
.player-rf-btn,
.player-bf-btn,
.player-gb-btn {
    font-size: clamp(2cap, 4vmax, 5cap);
    font-family: "CustomFont", sans-serif; /* Apply custom font */
}

/* Timeline container styling */
.timeline-container, .match-summary-container {
    margin: 1cap 1cap;
    background-color: transparent;
}

#timelineChart
{
    padding: 0cap;
}

th, tr, td
{
    background-color: transparent !important;
    color: var(--color-base-light) !important;
    border: 1px solid var(--color-base-med) !important;
}

.cell-tight
{
    padding: 0cap !important;
    font-size: clamp(1cap, 5vmax, 3cap);
}

table
{
    background-color: transparent !important;
    text-align: center;
    font-size: clamp(1cap, 2vmax, 2cap);
}

.player-break
{
    color: var(--color-base-light);
}

.btn-primary
{
    margin: 0cap !important;
}

.matchSettings-heading
{
    font-family: "CustomFont", sans-serif; /* Apply custom font */
    font-size: 3cap; 
    text-align: center;
}

.match-result
{
    font-size: clamp(2cap, 5vmax, 5cap);
    font-weight: 900;
}

.break-indicator
{
    margin-top: clamp(1cap, 2vh, 4cap);
    width: clamp(1cap, 4vmax, 8cap);
}

.break-radio-btn
{
    margin: 0cap !important;
    padding: 0.5cap 3cap !important;
    border: 1px solid var(--color-base-med);
    border-radius: 1cap;
}

.form-check-input
{
    accent-color: var(--color-primary) !important;
    background-color: transparent !important;
    border-color: var(--color-primary) !important;
}

/* For better support, explicitly style the checked state */
.form-check-input[type="radio"]:checked {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 8px 4px rgba(234, 0, 103, 0.5);  
}