/* =============================================================
   SVI – Windsurfer Game
   ============================================================= */

.svi-game-wrapper {
	display: flex;
	flex-direction: column;
	gap: 20px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Canvas container */
.svi-game-container {
	position: relative;
	width: 100%;
	max-width: 800px;
	background: transparent;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0,0,0,0.18);
	line-height: 0;
}

#svi-game-canvas {
	display: block;
	width: 100%;
	height: auto;
	cursor: pointer;
}

/* Overlay (start / game-over screens) */
.svi-game-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 30, 60, 0.55);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.svi-game-start-screen,
.svi-game-over-screen {
	background: rgba(255,255,255,0.95);
	border-radius: 16px;
	padding: 32px 40px;
	text-align: center;
	max-width: 340px;
	width: 90%;
	box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.svi-game-start-screen h2,
.svi-game-over-screen h2 {
	margin: 0 0 8px;
	font-size: 1.6em;
	color: #1a1a2e;
}

.svi-game-start-screen p {
	margin: 0 0 10px;
	color: #555;
	font-size: 0.9em;
}

.svi-game-controls {
	font-size: 0.82em !important;
	color: #777 !important;
	margin-bottom: 20px !important;
}

.svi-game-controls kbd {
	display: inline-block;
	background: #f0f0f0;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 1px 6px;
	font-size: 0.9em;
	font-family: monospace;
}

.svi-game-over-screen {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.svi-game-over-screen p {
	margin: 0;
	font-size: 1.1em;
	color: #444;
}

.svi-game-over-screen strong {
	color: #fd2727;
	font-size: 1.3em;
}

.svi-game-name-wrap {
	display: flex;
	gap: 8px;
	width: 100%;
}

.svi-game-name-wrap input {
	flex: 1;
	padding: 8px 12px;
	border: 1.5px solid #ddd;
	border-radius: 8px;
	font-size: 0.95em;
	outline: none;
	transition: border-color 0.2s;
}

.svi-game-name-wrap input:focus {
	border-color: #fd2727;
}

/* HUD bar */
.svi-game-hud {
	display: flex;
	justify-content: space-between;
	padding: 8px 16px;
	background: rgba(255,255,255,0.08);
	border-radius: 8px;
	font-size: 0.9em;
	color: #555;
}

.svi-game-hud strong {
	color: #fd2727;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

/* Leaderboard */
.svi-game-leaderboard {
	background: #fff;
	border: 1.5px solid #e8ecf0;
	border-radius: 12px;
	padding: 16px 20px;
}

.svi-game-leaderboard h3 {
	margin: 0 0 12px;
	font-size: 1em;
	color: #1a1a2e;
}

.svi-leaderboard-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	border-radius: 8px;
	margin-bottom: 4px;
	font-size: 0.9em;
	background: #f8f9fa;
	transition: background 0.15s;
}

.svi-leaderboard-row:last-child { margin-bottom: 0; }

.svi-lb-gold   { background: #fff9e6; }
.svi-lb-silver { background: #f5f6f7; }
.svi-lb-bronze { background: #fff3ec; }

.svi-lb-rank {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-weight: 700;
	font-size: 0.8em;
	background: #e9ecef;
	color: #555;
	flex-shrink: 0;
}

.svi-lb-gold   .svi-lb-rank { background: #ffd700; color: #7d5a00; }
.svi-lb-silver .svi-lb-rank { background: #c0c0c0; color: #444; }
.svi-lb-bronze .svi-lb-rank { background: #cd7f32; color: #fff; }

.svi-lb-name {
	flex: 1;
	font-weight: 600;
	color: #1a1a2e;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.svi-lb-score {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: #fd2727;
	letter-spacing: 0.04em;
}

.svi-leaderboard-empty {
	color: #aaa;
	font-style: italic;
	font-size: 0.9em;
	text-align: center;
	padding: 8px 0;
	margin: 0;
}

/* Responsive */
@media (max-width: 480px) {
	.svi-game-start-screen,
	.svi-game-over-screen { padding: 24px 20px; }
	.svi-game-controls { display: none; }
}