/**
 * Space Cake Game — LAUNCHER (languette + panneau coulissant, façon SEO
 * Hero Ninja) pour la home. Fichier volontairement autonome et léger : il
 * ne dépend PAS des variables/tokens de sc-game.css (qui reste chargé en
 * lazy uniquement à l'ouverture du panneau). Chargé au pageload, doit donc
 * rester minimal et ne jamais impacter le LCP du contenu SEO.
 */

.sc-game-launcher-root,
.sc-game-launcher-root * {
	box-sizing: border-box;
}

.sc-game-launcher-root {
	--scl-bg: #0C221B;
	--scl-bg-2: #091A15;
	--scl-border: rgba(255, 92, 138, 0.35);
	--scl-pink: #FF5C8A;
	--scl-text: #EAF3EE;
	--scl-text-dim: rgba(234, 243, 238, 0.6);
	font-family: 'Familjen Grotesk', system-ui, -apple-system, sans-serif;
}

/* ------------------------------------------------------------------ */
/* Languette (desktop, bord gauche)                                    */
/* ------------------------------------------------------------------ */

/* liens sticky (pages internes : la languette/FAB sont des <a>) */
a.sc-game-tab, a.sc-game-fab { text-decoration: none; }
a.sc-game-tab:hover, a.sc-game-fab:hover { text-decoration: none; }

.sc-game-tab {
	position: fixed;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	z-index: 999990;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	padding: 4px 10px 11px 6px;
	background: #373248;
	border: 2px solid #ad2c6d;
	border-left: none;
	border-radius: 0 14px 14px 0;
	box-shadow: 6px 0 24px -8px rgba(0, 0, 0, 0.6);
	color: var(--scl-text);
	cursor: pointer;
	appearance: none;
	transition: padding 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.sc-game-tab:hover,
.sc-game-tab:focus-visible {
	box-shadow: 10px 0 30px -6px rgba(255, 92, 138, 0.35);
	outline: none;
}

/* Alien mascotte : dépasse au-dessus de la languette */
.sc-game-tab-alien {
	display: block;
	width: 150px;
	height: auto;
	margin: -106px 0 0;
	pointer-events: none;
	user-select: none;
	filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
}

/* Bouton Play sous le score */
.sc-game-tab-play {
	margin-top: 2px;
	padding: 5px 18px;
	border-radius: 999px;
	background: #FF5C8A;
	color: #0B1A15;
	font-family: 'Phudu', sans-serif;
	font-weight: 800;
	font-size: 16px;
	letter-spacing: 0.5px;
	white-space: nowrap;
	box-shadow: 0 3px 0 #a83248;
	transition: background 0.15s ease, transform 0.1s ease;
}
.sc-game-tab:hover .sc-game-tab-play {
	background: #FF7A29;
}
.sc-game-tab:active .sc-game-tab-play {
	transform: translateY(2px);
	box-shadow: 0 1px 0 #a83248;
}

.sc-game-tab-main {
	font-family: 'Phudu', sans-serif;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 0.82;
	margin-top: -1px;
	white-space: nowrap;
}

.sc-game-tab-teaser {
	align-self: center;
	text-align: center;
	font-size: 26px;
	font-weight: 900;
	letter-spacing: -1px;
	color: #d40b4f;
	white-space: nowrap;
	margin-top: 3px;
	margin-left: -6px;
	-webkit-text-stroke: 4px #fff;
	paint-order: stroke fill;
	filter: drop-shadow(0 2px 0 #9d0039) drop-shadow(0 3px 2px rgba(40, 10, 55, 0.6));
	animation: sc-game-teaser-pulse 1.6s ease-in-out infinite;
}

/* ------------------------------------------------------------------ */
/* Bouton flottant (mobile)                                            */
/* ------------------------------------------------------------------ */

.sc-game-fab {
	display: none;
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 999990;
	width: 52px;
	height: 52px;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--scl-bg) 0%, var(--scl-bg-2) 100%);
	border: 1px solid var(--scl-border);
	box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6);
	color: var(--scl-text);
	font-size: 22px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	appearance: none;
}

.sc-game-fab:focus-visible {
	outline: 2px solid var(--scl-pink);
	outline-offset: 2px;
}


/* Respecter l'attribut hidden sur le panneau et le backdrop */
.sc-game-panel[hidden],
.sc-game-backdrop[hidden] { display: none !important; }

/* ------------------------------------------------------------------ */
/* Backdrop                                                             */
/* ------------------------------------------------------------------ */

.sc-game-backdrop {
	position: fixed;
	inset: 0;
	z-index: 999991;
	background: rgba(4, 8, 7, 0.6);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.sc-game-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* ------------------------------------------------------------------ */
/* Panneau coulissant                                                   */
/* ------------------------------------------------------------------ */

.sc-game-panel {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 999992;
	width: 460px;
	max-width: 92vw;
	background: linear-gradient(180deg, var(--scl-bg) 0%, var(--scl-bg-2) 100%);
	border-right: 1px solid var(--scl-border);
	box-shadow: 20px 0 60px -20px rgba(0, 0, 0, 0.85);
	transform: translateX(-100%);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	padding: 20px 16px 24px;
}

.sc-game-panel.is-open {
	transform: translateX(0);
}

.sc-game-panel-close {
	position: sticky;
	top: 0;
	align-self: flex-end;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	border: 1px solid var(--scl-border);
	background: rgba(234, 243, 238, 0.06);
	color: var(--scl-text);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	appearance: none;
	z-index: 1;
	margin-bottom: 8px;
}

.sc-game-panel-close:hover,
.sc-game-panel-close:focus-visible {
	background: rgba(255, 92, 138, 0.25);
	outline: none;
}

.sc-game-panel-body {
	flex: 1;
}

/* Le placeholder (rendu avant lazy-load du moteur) doit occuper toute la
   largeur disponible du panneau, sans le padding fixe pensé pour la page
   /game (le panneau a déjà son propre padding). */
.sc-game-panel-body .sc-game-wrap {
	padding: 0;
	width: 100%;
}
.sc-game-panel-body .sc-game-placeholder-card,
.sc-game-panel-body .sc-game-card {
	max-width: 100%;
}

body.sc-game-panel-open {
	overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Tablette & mobile : masquer le launcher entièrement (desktop only)  */
/* ------------------------------------------------------------------ */

@media (max-width: 1100px) {
	.sc-game-launcher-root {
		display: none !important;
	}
}

/* Dans le panneau : pas de carte arrondie interne, le contenu remplit le panneau. */
.sc-game-panel .sc-game-card{
	max-width:none!important;
	width:100%!important;
	border:none!important;
	border-radius:0!important;
	box-shadow:none!important;
	background:transparent!important;
}

/* Harmoniser le fond du panneau avec la zone de jeu (un seul ton). */
.sc-game-panel{background:#04100C!important}

/* Fond TOTALEMENT unifié dans le panneau (panneau + wrappers + carte + zone de jeu). */
#sc-game-panel,
#sc-game-panel .sc-game-panel-body,
#sc-game-panel .sc-game-wrap,
#sc-game-panel .sc-game-card,
#sc-game-panel .sc-game-stage{ background:#04100C !important; background-image:none !important; }
#sc-game-panel .sc-game-card{ border:none!important; border-radius:0!important; box-shadow:none!important; max-width:none!important; width:100%!important; }


@keyframes sc-game-teaser-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.08); opacity: 0.82; }
}