/*
 * Play Island public plugin compatibility layer.
 *
 * This file intentionally lives in the theme. Plugins own behavior and semantic
 * markup; Signal owns their visual presentation through the shared theme tokens.
 */

.playisland-theme {
	--pi-ink: var(--playora-text);
	--pi-blue: var(--playora-primary);
	--pi-border: var(--hairline);
	--pi-radius: var(--r-md);
	--pi-surface: var(--playora-card);
	--pi-surface-soft: var(--surface-soft);
	--pi-heading: var(--playora-heading);
	--pi-muted: var(--playora-muted);
}

.playisland-theme :where(
	.playisland-games-catalog,
	.pi-public,
	.playisland-leaderboard,
	.playisland-announcements,
	.playisland-member-dashboard,
	.playisland-friends-page,
	.playisland-play-together,
	.playisland-provider-dashboard,
	.playisland-notification-inbox,
	.playisland-notification-preferences,
	.playisland-daily-bonus,
	.playisland-wheel
) {
	color: var(--playora-text);
	font-family: var(--playora-font-body);
}

.playisland-theme :where(
	.playisland-games-catalog,
	.pi-public,
	.playisland-leaderboard,
	.playisland-announcements,
	.playisland-member-dashboard,
	.playisland-friends-page,
	.playisland-play-together,
	.playisland-provider-dashboard,
	.playisland-notification-inbox,
	.playisland-notification-preferences,
	.playisland-daily-bonus
) :where(h1, h2, h3, h4, legend) {
	color: var(--playora-heading);
	font-family: var(--playora-font-heading);
}

/* Shared cards and panels. */
.playisland-theme :where(
	.playisland-game-card,
	.pi-public-card,
	.pi-profile,
	.playisland-announcements article,
	.playisland-member-dashboard__hero,
	.playisland-member-dashboard section,
	.playisland-friend-card,
	.playisland-room-card,
	.playisland-provider-dashboard section,
	.playisland-notification-item,
	.playisland-daily-bonus,
	.playisland-wheel
) {
	background: var(--playora-card);
	border: 1px solid var(--hairline);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-xs);
	color: var(--playora-text);
}

.playisland-theme :where(
	.playisland-game-card,
	.pi-public-card,
	.playisland-friend-card,
	.playisland-room-card,
	.playisland-notification-item
) {
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.playisland-theme :where(
	.playisland-game-card,
	.pi-public-card,
	.playisland-friend-card,
	.playisland-room-card,
	.playisland-notification-item
):hover {
	border-color: color-mix(in srgb, var(--playora-primary) 45%, transparent);
	box-shadow: var(--glow-primary);
	transform: translateY(-3px);
}

/* Canonical Games catalog. */
.playisland-theme .playisland-games-catalog {
	max-width: var(--playora-content-width);
	margin: 0 auto;
	padding: var(--s-5);
}

.playisland-theme .playisland-games-catalog > h2 {
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	margin-bottom: var(--s-3);
}

.playisland-theme .playisland-games-search {
	display: grid;
	grid-template-columns: repeat(3, minmax(140px, 1fr)) auto;
	align-items: end;
	gap: var(--s-2);
	margin: 0 0 var(--s-5);
	padding: var(--s-3);
	border: 1px solid var(--hairline);
	border-radius: var(--r-md);
	background: color-mix(in srgb, var(--playora-card) 88%, transparent);
	box-shadow: var(--shadow-xs);
}

.playisland-theme .playisland-games-search label {
	align-self: center;
	color: var(--playora-muted);
	font-family: var(--playora-font-ui);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.playisland-theme :where(
	.playisland-games-search input,
	.pi-public input,
	.pi-public select,
	.pi-public textarea,
	.playisland-member-dashboard input,
	.playisland-member-dashboard select,
	.playisland-member-dashboard textarea,
	.playisland-friends-page input,
	.playisland-play-together input,
	.playisland-notification-preferences input,
	.playisland-notification-preferences select
) {
	min-height: 44px;
	padding: 0.68em 0.9em;
	border: 1px solid var(--hairline);
	border-radius: var(--r-sm);
	background: var(--playora-bg-soft);
	color: var(--playora-heading);
	font: inherit;
}

.playisland-theme :where(
	.playisland-games-search input,
	.pi-public input,
	.pi-public select,
	.pi-public textarea,
	.playisland-member-dashboard input,
	.playisland-member-dashboard select,
	.playisland-member-dashboard textarea
):focus {
	border-color: var(--playora-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--playora-primary) 18%, transparent);
	outline: none;
}

.playisland-theme .playisland-games-search button,
.playisland-theme :where(
	.playisland-game-launch,
	.playisland-button--primary,
	.pi-public .button,
	.playisland-friends-page button,
	.playisland-play-together button,
	.playisland-notification-inbox button,
	.playisland-notification-preferences button,
	.playisland-daily-bonus button
) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.72em 1.25em;
	border: 0;
	border-radius: var(--r-pill);
	background: var(--green-grad);
	box-shadow: var(--glow-primary);
	color: #04130d;
	font-family: var(--playora-font-ui);
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.playisland-theme :where(
	.playisland-games-search button,
	.playisland-game-launch,
	.playisland-button--primary,
	.pi-public .button
):hover {
	color: #04130d;
	filter: brightness(1.06);
	transform: translateY(-1px);
}

.playisland-theme .playisland-games-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap: var(--s-3);
}

.playisland-theme .playisland-game-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
}

.playisland-theme .playisland-game-card > img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-bottom: 1px solid var(--hairline);
}

.playisland-theme .playisland-game-card > :not(img, .playisland-game-featured) {
	margin-inline: var(--s-3);
}

.playisland-theme .playisland-game-card h3 {
	margin-top: var(--s-3);
	font-size: var(--t-lg);
}

.playisland-theme .playisland-game-card .playisland-game-launch {
	align-self: flex-start;
	margin-block: auto var(--s-3);
}

.playisland-theme .playisland-game-category,
.playisland-theme .playisland-game-genres {
	color: var(--playora-muted);
	font-size: var(--t-sm);
}

.playisland-theme .playisland-game-featured,
.playisland-theme .pi-badge {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	padding: 0.32em 0.7em;
	border: 1px solid color-mix(in srgb, var(--playora-accent) 38%, transparent);
	border-radius: var(--r-pill);
	background: color-mix(in srgb, var(--playora-accent) 14%, var(--playora-card));
	color: var(--playora-accent);
	font-size: var(--t-xs);
	font-weight: 800;
}

.playisland-theme .playisland-game-featured {
	position: absolute;
	z-index: 2;
	top: var(--s-2);
	left: var(--s-2);
}

.playisland-theme .playisland-games-empty,
.playisland-theme .pi-empty {
	padding: var(--s-5);
	border: 1px dashed var(--hairline);
	border-radius: var(--r-md);
	background: var(--surface-soft);
	color: var(--playora-muted);
	text-align: center;
}

.playisland-theme .playisland-games-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-1);
	margin: var(--s-5) 0 0;
	padding: 0;
	list-style: none;
}

.playisland-theme .playisland-games-pagination :where(a, span) {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.7em;
	border: 1px solid var(--hairline);
	border-radius: var(--r-sm);
	background: var(--playora-card);
}

.playisland-theme .playisland-games-pagination .current {
	border-color: var(--playora-primary);
	background: var(--tint-primary);
	color: var(--playora-heading);
}

/* Shared public experience components. */
.playisland-theme .pi-public {
	max-width: var(--playora-content-width);
	margin: var(--s-4) auto;
	padding: var(--s-4);
	border: 1px solid var(--hairline);
	border-radius: var(--r-lg);
	background: color-mix(in srgb, var(--playora-card) 88%, transparent);
	box-shadow: var(--shadow-sm);
}

.playisland-theme .pi-public-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: var(--s-3);
}

.playisland-theme .pi-public-card {
	padding: var(--s-3);
}

.playisland-theme .pi-profile {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: var(--s-4);
}

.playisland-theme .pi-avatar {
	display: grid;
	place-items: center;
	width: 88px;
	aspect-ratio: 1;
	overflow: hidden;
	border: 2px solid var(--playora-primary);
	border-radius: 50%;
	background: var(--green-grad);
	color: #04130d;
	font-size: var(--t-2xl);
	font-weight: 900;
	box-shadow: var(--glow-primary);
}

.playisland-theme .pi-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Leaderboards. */
.playisland-theme .playisland-leaderboard {
	max-width: 780px;
	margin: var(--s-4) auto;
	padding: var(--s-4);
	border: 1px solid var(--hairline);
	border-radius: var(--r-lg);
	background: var(--playora-card);
	box-shadow: var(--shadow-sm);
}

.playisland-theme .playisland-leaderboard ol {
	display: grid;
	gap: var(--s-1);
	margin: var(--s-3) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: playisland-rank;
}

.playisland-theme .playisland-leaderboard li {
	display: grid;
	grid-template-columns: 42px 1fr auto;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-2);
	border: 1px solid var(--hairline);
	border-radius: var(--r-sm);
	background: var(--surface-soft);
	counter-increment: playisland-rank;
}

.playisland-theme .playisland-leaderboard li::before {
	content: counter(playisland-rank);
	display: grid;
	place-items: center;
	width: 32px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--tint-primary);
	color: var(--playora-primary);
	font-weight: 900;
}

.playisland-theme .playisland-leaderboard li:first-child::before {
	background: var(--gold-grad);
	color: #1c1304;
}

.playisland-theme .playisland-leaderboard strong {
	color: var(--playora-accent);
	font-variant-numeric: tabular-nums;
}

/* Forms, tables, tabs, and account modules. */
.playisland-theme :where(
	.playisland-member-dashboard,
	.playisland-friends-page,
	.playisland-play-together,
	.playisland-provider-dashboard,
	.playisland-notification-inbox,
	.playisland-notification-preferences
) {
	max-width: var(--playora-content-width);
	margin-inline: auto;
}

.playisland-theme :where(
	.playisland-member-dashboard section,
	.playisland-provider-dashboard section,
	.playisland-notification-item
) {
	padding: var(--s-3);
}

.playisland-theme :where(
	.playisland-button--ghost,
	.playisland-member-dashboard a[class*="button"],
	.playisland-friends-page a[class*="button"]
) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0.68em 1.15em;
	border: 1px solid var(--hairline);
	border-radius: var(--r-pill);
	background: color-mix(in srgb, var(--playora-card) 76%, transparent);
	color: var(--playora-heading);
	font-weight: 700;
	text-decoration: none;
}

.playisland-theme :where(
	.playisland-member-dashboard table,
	.playisland-provider-dashboard table,
	.pi-public table
) {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--hairline);
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--playora-card);
}

.playisland-theme :where(
	.playisland-member-dashboard th,
	.playisland-member-dashboard td,
	.playisland-provider-dashboard th,
	.playisland-provider-dashboard td,
	.pi-public th,
	.pi-public td
) {
	padding: 0.8em 1em;
	border-bottom: 1px solid var(--hairline);
	text-align: start;
}

.playisland-theme :where(
	.playisland-member-dashboard th,
	.playisland-provider-dashboard th,
	.pi-public th
) {
	background: var(--surface-soft);
	color: var(--playora-muted);
	font-size: var(--t-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Announcements and notifications. */
.playisland-theme .playisland-announcements {
	display: grid;
	gap: var(--s-2);
	max-width: var(--playora-content-width);
	margin: var(--s-4) auto;
}

.playisland-theme .playisland-announcements article {
	position: relative;
	overflow: hidden;
	padding: var(--s-4);
}

.playisland-theme .playisland-announcements article::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: var(--green-grad);
}

.playisland-theme .playisland-notification-bell {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.5em 0.75em;
	border: 1px solid var(--hairline);
	border-radius: var(--r-pill);
	background: var(--playora-card);
	color: var(--playora-heading);
}

/* The theme owns the platform chrome; the game remains isolated in its iframe. */
.playisland-game-route .reels-canvas {
	min-width: 0;
}

.playisland-theme .playisland-game-page {
	flex: 1;
	padding: clamp(var(--s-3), 3vw, var(--s-5));
	background:
		radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--playora-primary) 10%, transparent), transparent 36%),
		var(--playora-bg);
}

.playisland-theme .playisland-game-page__shell {
	max-width: min(1500px, var(--playora-content-width));
}

.playisland-theme .playisland-game-page__heading h1 {
	margin: 0.15em 0 0;
	color: var(--playora-heading);
	font-family: var(--playora-font-heading);
	font-size: clamp(1.65rem, 3vw, 2.65rem);
	line-height: 1.05;
}

.playisland-theme .playisland-game-page__eyebrow {
	margin-block: var(--s-2) 0;
	color: var(--playora-primary);
}

.playisland-theme .playisland-game-page__back {
	align-items: center;
	color: var(--playora-muted);
	font-size: var(--t-sm);
	font-weight: 700;
	text-decoration: none;
}

.playisland-theme .playisland-game-page__back:hover,
.playisland-theme .playisland-game-page__back:focus-visible {
	color: var(--playora-primary);
}

.playisland-theme .playisland-game-page__canvas {
	padding: clamp(4px, 0.7vw, 10px);
	border: 1px solid var(--hairline);
	border-radius: calc(var(--r-lg) + 4px);
	background: #030508;
	box-shadow: var(--playora-shadow-lg);
}

.playisland-theme .playisland-game-stage {
	overflow: hidden;
	border-radius: var(--r-lg);
	background: #000;
}

.playisland-theme #playisland-game-loading {
	background:
		radial-gradient(circle, color-mix(in srgb, var(--playora-primary) 24%, #10182b), #070b14 70%);
	color: var(--playora-heading);
	font-weight: 700;
}

.playisland-theme .playisland-launch-actions button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.7em 1.15em;
	border: 1px solid var(--hairline);
	border-radius: var(--r-pill);
	background: var(--playora-card);
	color: var(--playora-heading);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.playisland-theme .playisland-launch-actions button:last-child {
	border-color: transparent;
	background: var(--green-grad);
	color: #04140e;
}

.playisland-theme .playisland-launch-actions button:hover,
.playisland-theme .playisland-launch-actions button:focus-visible {
	transform: translateY(-1px);
	box-shadow: var(--playora-shadow-sm);
}

.playisland-theme .playisland-game-help {
	margin-top: var(--s-3);
	padding: var(--s-3);
	border: 1px solid var(--hairline);
	border-radius: var(--r-md);
	background: var(--playora-card);
	color: var(--playora-text);
}

.playisland-theme .playisland-game-help summary {
	color: var(--playora-heading);
	font-weight: 700;
	cursor: pointer;
}

.playisland-theme .playisland-game-rewards {
	position: relative;
	overflow: hidden;
	border-color: var(--hairline);
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--playora-primary) 8%, transparent), transparent 45%),
		var(--playora-card);
	box-shadow: var(--playora-shadow-sm);
}

.playisland-theme .playisland-game-rewards::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: var(--green-grad);
}

.playisland-theme .playisland-game-rewards__header h2 {
	color: var(--playora-heading);
	font-family: var(--playora-font-heading);
}

.playisland-theme .playisland-game-rewards__header .playisland-game-page__eyebrow {
	margin: 0;
}

.playisland-theme .playisland-game-rewards__status {
	padding: 0.45em 0.75em;
	border: 1px solid color-mix(in srgb, var(--playora-primary) 35%, var(--hairline));
	border-radius: var(--r-pill);
	background: color-mix(in srgb, var(--playora-primary) 8%, transparent);
	color: var(--playora-primary);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.playisland-theme .playisland-game-rewards__status > span {
	background: var(--playora-primary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--playora-primary) 15%, transparent);
}

.playisland-theme .playisland-game-rewards__empty {
	color: var(--playora-muted);
}

.playisland-theme .playisland-reward-card {
	min-width: 150px;
	padding: 0.65em 0.85em;
	border: 1px solid var(--hairline);
	border-radius: var(--r-md);
	background: var(--surface-soft);
	color: var(--playora-text);
}

.playisland-theme .playisland-reward__icon {
	flex: 0 0 auto;
	object-fit: cover;
	background: color-mix(in srgb, var(--playora-primary) 16%, var(--playora-card));
	color: var(--playora-primary);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--playora-primary) 28%, transparent);
}

.playisland-theme .playisland-reward--coins .playisland-reward__icon,
.playisland-theme .playisland-reward--season_points .playisland-reward__icon {
	background: color-mix(in srgb, var(--playora-reward) 18%, var(--playora-card));
	color: var(--playora-reward);
}

.playisland-theme .playisland-reward--gems .playisland-reward__icon {
	background: color-mix(in srgb, var(--playora-secondary) 18%, var(--playora-card));
	color: var(--playora-secondary);
}

.playisland-theme .playisland-reward--achievement .playisland-reward__icon {
	background: var(--gold-grad);
	color: #201503;
}

.playisland-theme .playisland-reward__copy strong {
	color: var(--playora-heading);
	font-family: var(--playora-font-heading);
}

.playisland-theme .playisland-reward__copy small {
	color: var(--playora-muted);
	letter-spacing: 0.08em;
}

.playisland-theme .playisland-reward-toast {
	border-color: color-mix(in srgb, var(--playora-primary) 30%, var(--hairline));
	background:
		linear-gradient(145deg, color-mix(in srgb, var(--playora-primary) 12%, transparent), transparent 48%),
		var(--playora-card);
	color: var(--playora-heading);
	box-shadow: var(--playora-shadow-lg);
	animation: playisland-reward-in 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.playisland-theme .playisland-reward-toast > strong {
	display: block;
	font-family: var(--playora-font-heading);
	font-size: 1.05rem;
}

@keyframes playisland-reward-in {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.98);
	}
}

@media (max-width: 760px) {
	.playisland-theme .playisland-game-rewards__header {
		align-items: flex-start;
	}

	.playisland-theme .playisland-reward-card {
		flex: 1 1 140px;
	}

	.playisland-reward-toasts {
		inset: auto 12px calc(76px + env(safe-area-inset-bottom)) 12px;
		width: auto;
	}
}

@media (max-width: 760px) {
	.playisland-theme .playisland-games-catalog,
	.playisland-theme .pi-public {
		padding: var(--s-3);
	}

	.playisland-theme .playisland-games-search {
		grid-template-columns: 1fr;
	}

	.playisland-theme .pi-profile {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.playisland-theme .pi-avatar {
		margin-inline: auto;
	}

	.playisland-theme :where(
		.playisland-member-dashboard,
		.playisland-provider-dashboard,
		.pi-public
	) table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.playisland-theme :where(
		.playisland-game-card,
		.pi-public-card,
		.playisland-friend-card,
		.playisland-room-card,
		.playisland-notification-item
	) {
		transition: none;
	}

	.playisland-theme .playisland-reward-toast {
		animation: none;
	}
}