/* style.css for SkateQuest */
#map { height: 60vh; width: 100vw; margin: 0 auto; border-radius: 12px; box-shadow: 0 2px 8px #0002; }
nav { display: flex; justify-content: center; gap: 0.5em; margin: 1em 0; }
nav button { padding: 0.5em 1em; border-radius: 6px; border: none; background: #d2673d; color: #fff; font-weight: bold; cursor: pointer; transition: background 0.2s; }
nav button.active, nav button:hover { background: #a94e2b; }
header { text-align: center; margin: 1em 0; }
#content { max-width: 600px; margin: 0 auto; background: #fff8f3; border-radius: 8px; box-shadow: 0 1px 4px #0001; padding: 1em; min-height: 100px; }
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100vw; height: 100vh; background: #0008; }
.modal-content { background: #fff; margin: 10vh auto; padding: 2em; border-radius: 10px; max-width: 400px; position: relative; }
.close-button { position: absolute; top: 0.5em; right: 1em; font-size: 1.5em; cursor: pointer; }
.camera-container { display: flex; flex-direction: column; align-items: center; }
#cameraPreview { width: 100%; max-width: 320px; border-radius: 8px; margin-bottom: 1em; }
.camera-controls button { margin: 0.5em; }
.legal-content { max-height: 60vh; overflow-y: auto; }
.user-location-marker { background: #d2673d; border-radius: 50%; width: 18px; height: 18px; border: 2px solid #fff; box-shadow: 0 0 4px #0006; }

/* Toast styles */
.toast {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: #222;
	color: #fff;
	padding: 12px 20px;
	border-radius: 8px;
	font-size: 1rem;
	z-index: 9999;
	animation: fadeInOut 3s ease-in-out;
}

.panel {
	background: #fff;
	color: #111;
	padding: 1rem;
	border-radius: 8px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

#leaderboard-list div {
	margin: 0.5rem 0;
	font-weight: bold;
}

.badges { display:flex; gap:0.5rem; flex-wrap:wrap; }
.badges div { background:#fff3; color:#fff; padding:.4rem .6rem; border-radius:6px; }

/* Pending challenges list */
#pending-challenges-list { display:flex; flex-direction:column; gap:0.6rem; }
.pending-row { display:flex; justify-content:space-between; align-items:center; background:#f7f7f7; padding:.6rem; border-radius:6px; border:1px solid #eee; }
.pending-row button { background:#2a8f2a; color:#fff; border:none; padding:.4rem .6rem; border-radius:6px; cursor:pointer; }
.pending-row button:hover { background:#227422; }

.toast { position: fixed; bottom: 20px; right: 20px; left: auto; transform: none; }

.heatmap-toggle { margin-top:0.5rem; color:#fff; }

@keyframes fadeInOut {
	0% { opacity: 0; bottom: 10px; }
	10% { opacity: 1; bottom: 20px; }
	90% { opacity: 1; bottom: 20px; }
	100% { opacity: 0; bottom: 10px; }
}