/* New Game and Resume Game */

#scoretable-container {
	display: none;
}

/* Buttons */
input[type="submit"] {
    padding: 0.3125rem 0.625rem; /* 5px 10px */
    background-color: #45a049;
    color: white;
    border: none;
    border-radius: 0.1875rem; /* 3px */
    cursor: pointer;
    font-size: 1.166rem; /* 14pt → 1.166rem */
}

/* Ranked play text */
#rankedplay {
    font-size: 1rem; /* 12pt → 1rem */
    font-style: italic;
    padding: 0.625rem 0 0; /* "10 0 0" → assuming 10px → 0.625rem */
    margin: 0.625rem 0 0; /* same assumption */
}

/* Add player section */
#addPlayers {
    padding-bottom: 0;
    margin-bottom: 0;
    font-size: 1rem; /* 16pt? If originally px, adjust. Was 16pt? → 1.333rem */
    font-size: 1.333rem; /* 16pt → 21.33px → 1.333rem */
}

#playerName {
    background-color: lightgrey;
    font-size: 1.333rem; /* 16pt → 1.333rem */
    width: 9.375rem; /* 150px → 9.375rem */
}

#teeOff {
    padding: 0.375rem 1.25rem; /* 6px 20px */
    background-color: skyblue;
    color: black;
    border: none;
    border-radius: 0.3125rem; /* 5px */
    cursor: pointer;
    font-size: 1.333rem; /* 16pt → 1.333rem */
}

/* ---------- New Game Layout ---------- */

.new-game-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1rem 2rem;
}

/* Card container */
.new-game-card {
    width: 100%;
    max-width: 28rem; /* ~448px */
    margin-top: 1rem;
    background: rgba(5, 46, 22, 0.95);
    border-radius: 0.95rem;
    box-shadow: 0 0.9rem 2rem rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(163, 230, 53, 0.3);
    padding: 1.5rem 1.75rem 1.75rem;
    text-align: left;
}

/* Form + input */
.player-form {
    margin: 0 0 1.25rem 0;
}

.field-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.95rem;
    color: #f1faee;
}

/* Input + Add Player on one line */
.player-input-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.player-input {
    flex: 1;
    padding: 0.45rem 0.6rem;
    border-radius: 0.4rem;
    border: 1px solid rgba(0, 0, 0, 0.35);
    font-size: 1rem;
    background-color: #e5e7eb;
    color: #111827;
}

/* Generic button styles */
.btn {
    border: none;
    border-radius: 999px; /* pill-shaped */
    padding: 0.45rem 1.1rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
    white-space: nowrap;
}

/* Secondary = Add Player */
.btn-secondary {
    background-color: #38b000;
    color: #f1faee;
    box-shadow: 0 0.15rem 0.35rem rgba(0,0,0,0.35);
}

.btn-secondary:hover {
    background-color: #2d9100;
    transform: translateY(-1px);
}

/* Primary = Tee Off */
.btn-primary {
    display: block;
    width: 100%;
    margin-top: 1rem;
    background-color: #4dabf7; /* soft blue */
    color: #022c3a;
    text-align: center;
    box-shadow: 0 0.2rem 0.45rem rgba(0,0,0,0.45);
}

.btn-primary:hover {
    background-color: #3b8fd9;
    transform: translateY(-1px);
}

/* Ranked note text */
.ranked-note {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    font-style: italic;
    color: rgba(241, 250, 238, 0.75);
    text-align: center;
}

.player-chip-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;   /* center the chips */
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.player-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background-color: #14532d;
    color: #e0f2e9;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 999px;
    box-shadow: 0 0.15rem 0.35rem rgba(0, 0, 0, 0.25);
}


/* Tweak on small screens */
@media (max-width: 600px) {
    .new-game-card {
        margin-top: 0;
        padding: 1.25rem 1.25rem 1.5rem;
    }
}