:root{
	--bg:#0f1720;
	--panel:#0b1220;
	--muted:#9aa4b2;
	--accent:#3ddc97;
	--card:#0b1620;
	--glass:rgba(255,255,255,0.03);
}
*{box-sizing:border-box}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;margin:0;padding:0;color:#e6eef6;background:linear-gradient(180deg,#071021 0%, #0b1724 100%);min-height:100vh}
header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:transparent;border-bottom:1px solid rgba(255,255,255,0.04)}
.controls button{margin-left:8px;background:var(--accent);color:#042022;border:0;padding:8px 12px;border-radius:8px;cursor:pointer}
main{display:flex;flex-direction:column;gap:20px;padding:24px;max-width:1200px;margin:0 auto}
.board{width:100%}
.quarter-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between}
.quarter{width:calc(25% - 10px);background:linear-gradient(180deg,#07121a,#081722);padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);box-sizing:border-box;}
.quarter h3{margin:0 0 12px;color:var(--muted)}
.drop{min-height:220px;padding:12px;border-radius:8px;background:linear-gradient(180deg,#07121a,rgba(255,255,255,0.01));border:1px dashed rgba(255,255,255,0.03)}

/*.drop .player-card{margin-bottom:8px}*/

.drop .player-card{
    margin-bottom:8px;

    position:relative;

    padding:8px 10px;

    gap:4px;

    min-height:auto;
}

.player-pool{width:100%;background:var(--panel);padding:18px;border-radius:16px;box-shadow:0 8px 24px rgba(2,6,23,0.35)}
.player-pool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:14px}
.group-card{background:rgba(255,255,255,0.02);padding:14px;border-radius:14px;border:1px solid rgba(255,255,255,0.08)}
.group-card h3{margin:0 0 12px;color:var(--muted)}
.playersList{display:flex;flex-direction:column;gap:10px;max-height:420px;overflow:auto}
.add-player{width:100%;background:var(--panel);padding:18px;border-radius:16px;box-shadow:0 8px 24px rgba(2,6,23,0.35)}
.player-card{padding:12px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);cursor:grab;display:flex;flex-direction:column;gap:10px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 2px 6px rgba(2,6,23,0.6)}
.player-card strong{font-size:1rem}
.player-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:var(--glass);color:var(--muted);font-size:12px}
.quarter-controls{display:flex;gap:6px;flex-wrap:wrap}
.quarter-dot{width:26px;height:26px;border-radius:6px;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;cursor:pointer;transition:background 0.2s, color 0.2s}
.quarter-dot.active{background:var(--accent);color:#021}
.player-actions{display:flex;gap:8px;flex-wrap:wrap}
.dribbler{border-left:6px solid #ffb86b}
.rebounder{border-left:6px solid #7bd389}
.defense{border-left:6px solid #6aa6ff}
.player-card.imbalanced{outline:2px solid rgba(255,96,92,0.9);box-shadow:0 6px 20px rgba(255,96,92,0.08);}
.player-card .edit-btn{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:6px;border-radius:8px;color:var(--muted);cursor:pointer}
/* chatgpt edit .remove-btn{background:rgba(255,96,92,0.06);border:1px solid rgba(255,96,92,0.18);color:#ff6b61;padding:6px 8px;border-radius:8px;cursor:pointer} */

.remove-btn{
    position:absolute;
    top:4px;
    right:4px;

    background:none;
    border:none;

    color:#ff6b61;

    font-size:16px;
    font-weight:700;

    padding:0;

    cursor:pointer;

    line-height:1;
}

.remove-btn:hover{
    color:white;
}

.present-btn{background:rgba(61,220,151,0.12);border:1px solid rgba(61,220,151,0.24);color:#c7ffe9;padding:6px 8px;border-radius:8px;cursor:pointer}
.player-card.absent{opacity:0.45;cursor:not-allowed;}

/* Responsive layout for phones */
@media (max-width: 720px){
	main{flex-direction:column;padding:12px}
	.quarter-row{flex-direction:column}
	.quarter{width:100%;min-width:auto;margin-bottom:14px}
	.player-pool-grid{grid-template-columns:1fr}
	.playersList{max-height:220px}
}

.messages{margin-top:12px;color:#ffb3b3}
form label{display:block;margin-bottom:10px;color:var(--muted)}
button{padding:8px 12px;border-radius:8px;border:0;background:var(--accent);color:#021;cursor:pointer}

.quarter-status{
    display:flex;
    gap:4px;
}

.status-dot{
    width:8px;
    height:8px;

    border-radius:50%;

    background:rgba(255,255,255,.15);

    transition:.2s;
}

.quarter-player-name{
    font-size:.9rem;
    font-weight:600;

    padding-right:16px;
}

.quarter-status{
    display:flex;

    gap:4px;

    align-items:center;
}

.status-dot{
    width:8px;
    height:8px;

    border-radius:50%;

    background:rgba(255,255,255,.15);

    transition:.2s ease;
}

.status-dot.active{
    background:var(--accent);

    box-shadow:
        0 0 4px rgba(61,220,151,.75);
}