* { box-sizing: border-box; }
html, body { width:100%; }
body {
	font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow-x: hidden;
	background: #f5f6f8;
}
header {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:14px 16px;
	background:#2b2b2b;
	color:#fff;
}
header h1 { margin:0; font-size:1.2rem; line-height:1.2; }
#controls { display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
#me { font-size:.95rem; opacity:.92; }
main {
	flex:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:20px;
	padding:16px;
}
#board-area { width:min(100%, 800px); display:flex; flex-direction:column; gap:16px; }
#board { display:flex; justify-content:center; width:100%; }
.bingo-table { width:100%; border-collapse:collapse; table-layout: fixed; }
.bingo-table td { border:2px solid #444; padding:18px; text-align:center; font-size:1.05rem; user-select:none; background:#fafafa; vertical-align:middle; word-break:break-word; }
.bingo-table td.checked { background:linear-gradient(135deg,#a0e8a0,#6cc36c); color:#062b06; }
.bingo-table td.claimed { font-weight:600; }
.bingo-table td[data-claimed-by-id="1"] { background:linear-gradient(135deg,#ff9999,#ff5252); }
.bingo-table td[data-claimed-by-id="2"] { background:linear-gradient(135deg,#99ccff,#3399ff); }
.bingo-table td[data-claimed-by-id="3"] { background:linear-gradient(135deg,#ffdd99,#ffbb33); }
.bingo-table td[data-claimed-by-id="4"] { background:linear-gradient(135deg,#cc99ff,#9966ff); }
.bingo-table td[data-claimed-by-id="5"] { background:linear-gradient(135deg,#99ffcc,#33dd99); }
.bingo-table td[data-claimed-by-id="6"] { background:linear-gradient(135deg,#ffccaa,#ff9966); }
.bingo-table td[data-claimed-by-id="7"] { background:linear-gradient(135deg,#ffaadd,#ff66bb); }
.bingo-table td[data-claimed-by-id="8"] { background:linear-gradient(135deg,#aaddff,#66aaff); }
.bingo-table td[data-claimed-by-id="9"] { background:linear-gradient(135deg,#ddffaa,#aaff66); }
.bingo-table td[data-claimed-by-id="10"] { background:linear-gradient(135deg,#ffdddd,#ff9999); }
.cell-label { font-size:1.1rem; }
.cell-claimed-by { margin-top:8px; font-size:.9rem; color:inherit; opacity:.9; }
#claim-list { background:#fff; border:1px solid #ddd; border-radius:12px; padding:16px; width:100%; box-shadow:0 6px 20px rgba(0,0,0,.05); }
#claim-list h2 { margin:0 0 12px 0; }
#items-to-claim { list-style:decimal; padding-left: 1.4rem; margin:0; display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:8px 24px; }
#items-to-claim li { padding:10px 10px; min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:10px; background:#f7f7f7; border-radius:8px; }
#items-to-claim li:hover { background:#e9eefc; }
#items-to-claim li.claimed { opacity:.75; background:#eef2ef; }
.claim-item-label { min-width:0; }
.claim-button { padding:6px 10px; min-height:32px; font-size:.85rem; border-radius:999px; background:#2b2b2b; color:#fff; flex:0 0 auto; }
.claim-button:hover { background:#1d1d1d; }
.claim-button:disabled { background:#9aa0a6; cursor:not-allowed; }
button { padding:10px 14px; font-size:1rem; border-radius:8px; border: none; cursor:pointer; min-height:44px; }
footer { padding:12px; text-align:center; font-size:.9rem; color:#666; }

@media (max-width: 720px) {
	header {
		flex-direction:column;
		align-items:flex-start;
	}

	#controls {
		width:100%;
		justify-content:space-between;
	}

	main {
		padding:12px;
		gap:16px;
	}

	#board-area {
		gap:12px;
	}

	.bingo-table td {
		padding:10px 6px;
		font-size:.9rem;
	}

	.cell-label {
		font-size:.95rem;
	}

	.cell-claimed-by {
		font-size:.75rem;
		margin-top:4px;
	}

	#claim-list {
		padding:12px;
	}

	#items-to-claim {
		grid-template-columns: 1fr;
		gap:8px;
		padding-left: 1.2rem;
	}

	#items-to-claim li {
		min-height:48px;
		padding:12px;
	}

	.claim-button {
		padding:6px 8px;
		font-size:.8rem;
		min-height:30px;
	}
}

@media (max-width: 420px) {
	header h1 {
		font-size:1.05rem;
	}

	#me {
		font-size:.85rem;
	}

	.bingo-table td {
		padding:8px 4px;
		font-size:.82rem;
	}

	.cell-label {
		font-size:.88rem;
	}

	button {
		padding:10px 12px;
		width:100%;
	}

	.claim-button {
		width:auto;
		padding:6px 8px;
	}
}