/* Styles extracted to reduce inline styles in main.js */
.player-panel h3 { margin: 0; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background 0.2s ease; }
.player-panel h3.locked { cursor: default; }
.start-btn { padding: 10px 14px; border-radius: 8px; cursor: pointer; }
.special-tile-card .header-hero { padding: 25px; text-align: center; }
.special-tile-card .hero-emoji { font-size:48px; margin-bottom:8px; }
.winner-modal { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9); display:flex; align-items:center; justify-content:center; z-index:3000; }
.winner-modal .content { background:white; border-radius:30px; padding:0; text-align:center; box-shadow:0 30px 90px rgba(0,0,0,0.6); border:5px solid gold; overflow:hidden; max-width:500px; width:90%; }
.winner-modal .play-again { padding:16px 40px; background:linear-gradient(135deg,#f39c12 0%,#f1c40f 100%); color:white; border:3px solid #f39c12; border-radius:30px; font-size:20px; font-weight:700; cursor:pointer; }
.modal .close-btn { padding:14px 32px; background:linear-gradient(135deg, #667eea 0%, #764ba2 100%); color:white; border:2px solid #764ba2; border-radius:25px; cursor:pointer; font-size:16px; font-weight:700; }
/* lightweight utilities */
.dimmed { opacity:0.5; filter:grayscale(60%); }

/* Settings button - top left, responsive */
.settings-btn {
	position: fixed;
	top: 1.2vw;
	left: 1.2vw;
	z-index: 12000;
	background: #e5e7eb;
	border-radius: 50%;
	box-shadow: 0 2px 8px #0001;
	padding: 0;
	width: 36px;
	height: 36px;
	display: none;
	align-items: center;
	justify-content: center;
	border: none;
	outline: none;
	transition: box-shadow 0.18s, background 0.18s, top 0.2s, left 0.2s;
	cursor: pointer;
}
.settings-btn svg {
	color: #6b7280;
	filter: none;
}
.settings-btn:hover {
	background: #d1d5db;
	box-shadow: 0 4px 16px #0002;
}
.settings-btn.shown {
	display: flex !important;
}
@media (max-width: 600px) {
	.settings-btn {
		top: 2vw;
		left: 2vw;
		width: 28px;
		height: 28px;
	}
}
/* Roll timer animations */
@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateX(30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes pulse {
	0%, 100% {
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	}
	50% {
		box-shadow: 0 4px 25px rgba(245, 87, 108, 0.5);
	}
}