#scoreboard-table td.round-label, #scoreboard-table th.round-label{position:sticky;left:0;z-index:3}
:root{--bg:#f6f8fa;--card:#fff;--accent:#0b5fff;--muted:#666}
*{box-sizing:border-box}
body{font-family:Segoe UI,Roboto,Arial,sans-serif;margin:0;background:var(--bg);color:#111}
header{padding:1rem;background:linear-gradient(90deg,#fff 0%,#f0f4ff 100%);box-shadow:0 1px 0 rgba(0,0,0,.05)}
header h1{margin:0;font-size:1.25rem}
.subtitle{margin:0;color:var(--muted);font-size:.9rem}
main{max-width:1100px;margin:1rem auto;padding:0 1rem}
.muted{color:var(--muted);font-size:.9rem}
.card{background:var(--card);padding:1rem;border-radius:8px;margin-bottom:1rem;box-shadow:0 6px 12px rgba(12,20,40,.04)}
.row{display:flex;gap:.5rem;align-items:center;margin-top:.5rem}
input[type=text],input[type=number],select{padding:.5rem;border:1px solid #dfe6f3;border-radius:6px}
button{padding:.5rem .75rem;border-radius:6px;border:1px solid transparent;background:#eee;cursor:pointer}
button.primary{background:var(--accent);color:#fff}
.hidden{display:none}
.player-row{display:flex;gap:.75rem;align-items:center;margin:.25rem 0}
.player-name{min-width:120px}
.score-input.active{outline:2px solid var(--accent);box-shadow:0 4px 8px rgba(11,95,255,.08);border-color:var(--accent)}
.score-input.next{outline:2px dashed rgba(11,95,255,.6);box-shadow:none}
#scoreboard-table table{width:100%;border-collapse:collapse}
#scoreboard-table{overflow:auto}
#scoreboard-table th,#scoreboard-table td{padding:.5rem;border-bottom:1px solid #f0f0f0;text-align:left}
.scoreboard-wrap{overflow:auto}
.player-col,.round-label{padding:.25rem .5rem}
.round-label{font-weight:600}
#scoreboard-table thead th{position:sticky;top:0;background:var(--card);z-index:2}
#scoreboard-table td.leader, #scoreboard-table th.leader{background:linear-gradient(90deg,#fef6e8,#fff8f0)}
.score-input-cell{cursor:pointer}
.score-input-cell input{width:100%;box-sizing:border-box;padding:.35rem;text-align:center;border:1px solid transparent}
.round-label{min-width:72px}
.player-col{white-space:nowrap;min-width:120px;width:120px}
/* per-row finalize removed */
.leader{background:linear-gradient(90deg,#fef6e8,#fff8f0)}
.actions{justify-content:flex-end}
@media (max-width:600px){.row{flex-direction:column;align-items:stretch}.player-name{min-width:unset}}

/* Header layout improvements for compact controls inside header */
header{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
header h1{flex:0 0 auto}
header .subtitle{flex:0 0 auto;margin-left:.5rem}
header .card{flex:0 0 auto;margin:0;padding:.5rem;border-radius:8px}
/* If round-entry is placed inside the header, keep it compact */
#round-entry.card{min-width:260px;max-width:420px}
@media (max-width:700px){
	/* stack header content on small screens and make the round entry full-width */
	header{align-items:stretch}
	#round-entry.card{width:100%;max-width:none}
}

/* Tablet portrait tweaks - make player columns narrower and keep numpad below the grid */
@media (orientation: portrait) and (min-width:600px) and (max-width:1024px){
	/* shrink the player columns */
	#scoreboard-table table{font-size:.95rem}
	#scoreboard-table td.player-col, #scoreboard-table th.player-col{min-width:56px;width:6rem}
	.player-col{padding:.25rem .35rem}
	/* hide large scoreboard header to save vertical space */
	#scoreboard h2{display:none}
	/* Portrait: play-area stacks vertically (grid single column) */
	#play-area.play-grid{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;gap:1rem}
	#scoreboard{grid-column:1;grid-row:1;width:100%}
	.numpad{grid-column:1;grid-row:2;position:static;width:100%;box-shadow:0 -6px 30px rgba(0,0,0,.05)}
	.numpad-row{display:flex;flex-direction:row;gap:.35rem;margin:.35rem 0}
	.numpad-key{flex:1;padding:.75rem;border-radius:8px}
	/* compress player names and round label */
	header h1{font-size:1rem}
}

/* Landscape-specific layout for tablets and narrow laptops */
@media (orientation: landscape) and (min-width:600px) and (max-width:1400px){
	main { display: block; }
	header { width: 100%; z-index: 10; }
	/* Landscape: play-area is 2-column grid (numpad left 50%, scoreboard right 50%) */
	#play-area.play-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr;
		gap: 1rem;
		align-items: start;
		width: 100%;
	}
	#scoreboard {
		grid-column: 2;
		grid-row: 1;
		width: 100%;
	}
	.numpad {
		grid-column: 1 !important;
		grid-row: 1;
		position: static;
		width: 100%;
	}
	/* shrink player columns and reduce padding */
	#scoreboard-table table{font-size:.92rem}
	#scoreboard-table td.player-col, #scoreboard-table th.player-col{min-width:56px;width:6rem}
	.player-col{padding:.125rem .25rem}
	.round-label{min-width:15.6px;width:15.6px} /* 30% of previous 52px */
	#scoreboard h2{display:none}
	#scoreboard-table{padding-right:0}
}

/* Larger desktop landscape screens, let the table be comfortably wide but still compact */
@media (orientation: landscape) and (min-width:1400px){
	#scoreboard-table table{font-size:1rem}
	#scoreboard-table td.player-col, #scoreboard-table th.player-col{min-width:64px;width:auto}
	.numpad{right:16px; top:auto; bottom:16px; width:240px;height:auto; box-shadow: 0 6px 30px rgba(0,0,0,.06)}
	#scoreboard-table{padding-right:260px}
}

/* Full screen helper (when we use the Fullscreen API) */
.header-controls{display:flex;gap:.5rem;align-items:center}

.toggle-btn{background:transparent;border:1px solid rgba(0,0,0,0.06);padding:.3rem .5rem;border-radius:6px;cursor:pointer}
.toggle-btn.muted{color:var(--muted);border-color:transparent}
.toggle-btn:focus{outline:2px solid rgba(11,95,255,.15)}
.toggle-btn[aria-expanded='false']{transform:rotate(0deg)}
.toggle-btn[aria-expanded='true']{transform:rotate(180deg)}

/* Numpad styles */
.numpad{position:static;left:auto;right:auto;bottom:auto;background:#fff;padding:.5rem;border-top:1px solid #ddd;box-shadow:0 0 10px rgba(0,0,0,.02);z-index:2}
.numpad-row{display:flex;gap:.35rem;margin:.25rem 0}
.numpad-row{display:flex;gap:.35rem;margin:.25rem 0}
.numpad-key{flex:1;padding:.8rem;border-radius:8px;border:1px solid #eee;background:#fafafa;cursor:pointer;font-size:1.1rem}
.numpad-key.primary{background:var(--accent);color:#fff}
.numpad-row .primary{min-width:56px}
.numpad-key.small{flex:1}
.numpad.hidden{display:none}

/* Recent players UI */
#recent-players{flex-wrap:wrap;gap:.35rem}
.recent-player{background:#efefef;padding:.35rem .5rem;border-radius:6px;border:1px solid transparent;cursor:pointer}

/* Responsive scoreboard grid - players as columns */
@media (max-width:800px){
	#scoreboard-table table{font-size:.9rem}
	.round-label{min-width:60px}
}