/* Right Side Fixed Game List - front-end styles */

.rsgl-widget {
	position: fixed;
	right: 0;
	/* Extremely high z-index so this widget always stays visible and
	   clickable on top of any other popup/overlay on the page - including
	   full-screen overlays from other plugins (e.g. Puzzle/Brain Teaser
	   popups) - both while they are open and after they close. */
	z-index: 2147483000;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	display: flex;
	align-items: center;
}

.rsgl-pos-top { top: 100px; }
.rsgl-pos-middle { top: 50%; transform: translateY(-50%); }
.rsgl-pos-bottom { bottom: 100px; }

.rsgl-panel {
	background: #fff;
	width: 180px !important;
	overflow: hidden;
	box-shadow: -4px 0 20px rgba(0,0,0,0.15);
	max-height: 70vh;
	border-radius: 10px 0 0 10px;
	display: block !important;
}

.rsgl-panel-header {
	background: var(--rsgl-color, #7c3aed);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	padding: 10px 12px;
	white-space: nowrap;
}

.rsgl-game-items {
	list-style: none;
	margin: 0;
	padding: 6px;
	max-height: calc(70vh - 40px);
	overflow-y: auto;
}

.rsgl-game-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	border-radius: 8px;
	text-decoration: none;
	color: #222;
	white-space: nowrap;
}
.rsgl-game-item:hover { background: #f2f0ff; color: #222; }

.rsgl-icon-wrap {
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	border-radius: 6px;
	overflow: hidden;
	background: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
}
.rsgl-icon-wrap img { width: 100%; height: 100%; object-fit: cover; }

.rsgl-game-name {
	font-size: 13px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Modal (used only for games set to open as popup window) */
.rsgl-modal-overlay {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.6);
	/* Stays just below the widget's z-index, so the widget remains
	   visible/active even while this modal is open. */
	z-index: 2147482999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.rsgl-modal-box {
	background: #fff;
	width: 100%;
	max-width: 900px;
	height: 80vh;
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.rsgl-modal-header {
	background: #222;
	color: #fff;
	padding: 10px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 700;
	font-size: 14px;
}

.rsgl-modal-close {
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
}

#rsgl-modal-iframe {
	flex: 1;
	width: 100%;
	border: none;
}

/* Mobile: shrink a bit and keep it usable */
@media (max-width: 480px) {
	.rsgl-panel { width: 150px; }
	.rsgl-modal-box { height: 85vh; }
}