:root{
    --bg: #fff4cf;
    --surface: #fffdf7;
    --surface-soft: #fff1e6;
    --border: #ffd166;
    --text: #3a2a12;
    --muted: #7c5c2e;
    --accent: #ff7f50;
    --accent-hover: #ff5a36;
    --success: #48bfe3;
    --danger: #ef476f;
    --x-color: #3a86ff;
    --o-color: #ef476f;
}

*{ box-sizing: border-box; }

body{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    padding: 24px;
    color: var(--text);
    font-family: "Comic Sans MS", "Trebuchet MS", cursive;
    background:
        radial-gradient(circle at top, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.55) 30%, transparent 31%),
        radial-gradient(circle at 20% 20%, rgba(72,191,227,0.18) 0 10%, transparent 11%),
        radial-gradient(circle at 80% 18%, rgba(255,127,80,0.18) 0 10%, transparent 11%),
        radial-gradient(circle at 18% 82%, rgba(239,71,111,0.16) 0 10%, transparent 11%),
        radial-gradient(circle at 82% 78%, rgba(255,209,102,0.2) 0 10%, transparent 11%),
        linear-gradient(180deg, #fff7dc 0%, var(--bg) 100%);
}

.player-shell{
    width: min(820px, 96%);
    padding: 22px;
    border-radius: 26px;
    background: var(--surface);
    border: 4px solid var(--border);
    box-shadow: 0 16px 40px rgba(255, 127, 80, 0.12);
    text-align: center;
}

.player-shell h1{
    margin: 0 0 6px;
    color: #d97706;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 800;
}

.player-shell p.lead{ margin: 0 0 14px; color: var(--muted); }

.player-options{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.player-btn{
    padding: 12px 18px;
    border-radius: 22px;
    background: linear-gradient(180deg, #fffdf7, #fff0c9);
    border: 3px solid var(--border);
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(255,127,80,0.06);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.player-btn:hover{ transform: translateY(-2px) scale(1.02); border-color: var(--accent); box-shadow: 0 12px 30px rgba(255,127,80,0.12); }
.player-btn.selected{ background: linear-gradient(180deg, var(--accent), var(--accent-hover)); color: #fff; border-color: transparent; box-shadow: 0 18px 36px rgba(255,90,54,0.18); }

.player-fields{ margin-top:12px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.player-fields input[type="text"],
#player-selection input[type="text"]{
    padding:10px 12px;
    border-radius:12px;
    border:2px solid rgba(0,0,0,0.06);
    min-width:220px;
    background: linear-gradient(180deg, #fff, #fffaf0);
    transition: box-shadow 0.14s ease, border-color 0.12s ease;
}

#player-selection input[type="text"]:focus,
.player-fields input[type="text"]:focus{
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 6px 18px rgba(255,127,80,0.12);
}

#player-selection input::placeholder{ color: rgba(58,42,18,0.45); }

.start-controls{ margin-top:18px; display:flex; gap:12px; justify-content:center; }
.start-btn{
    padding: 12px 22px;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    border: 3px solid var(--accent-hover);
    border-radius: 999px;
    background: linear-gradient(180deg, var(--accent), var(--accent-hover));
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(255, 90, 54, 0.2);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.start-btn:hover{ transform: translateY(-1px) scale(1.02); box-shadow: 0 12px 26px rgba(255,90,54,0.26); }
.start-btn:disabled{ opacity: 0.6; cursor: not-allowed; }

@media (max-width:520px){
    .player-shell{ padding: 14px; }
    .player-btn{ padding: 10px 14px; }
    .player-fields input[type="text"]{ min-width:160px; }
}

/* Center the inputs inside PlayerSelection.html */
#player-selection{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:20px 8px;
}

#player-selection h1{ margin:0; font-size:1.25rem; color:var(--text); font-weight:700; }

#player-selection input[type="text"]{
    width: min(520px, 86%);
    margin: 0 auto;
    text-align: center;
    font-size: 1rem;
}

/* Start button styling */
#start-button,
#player-selection button{
    margin-top: 8px;
    padding: 12px 22px;
    font-weight: 800;
    font-size: 1rem;
    color: #fff;
    border-radius: 999px;
    border: 3px solid var(--accent-hover);
    background: linear-gradient(180deg, var(--accent), var(--accent-hover));
    box-shadow: 0 12px 30px rgba(255,127,80,0.12);
    cursor: pointer;
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}

#start-button:hover,
#player-selection button:hover{ transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 36px rgba(255,90,54,0.18); }

#start-button:active,
#player-selection button:active{ transform: translateY(1px); }