/* Corki Invaders - hoja de estilo minima.
   Todo lo que se pueda hacer con CSS compuesto por GPU (scanlines, vineta)
   se hace aqui para no gastar ni un ciclo de CPU por frame. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #0b0812;
	cursor: none;
}

#stage {
	position: fixed;
	inset: 0;
	overflow: hidden;
	/* Aisla el repintado: el navegador no recalcula el resto del documento. */
	contain: strict;
}

#screen {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	/* Clave del rendimiento: el canvas es diminuto (p.ej. 480x270) y la GPU
	   lo escala a pantalla completa sin interpolar. */
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	-ms-interpolation-mode: nearest-neighbor;
}

/* Con control por raton se muestra el puntero (util al probar en navegador). */
body.playable, body.playable #stage { cursor: crosshair; }

/* --- Overlays CRT: coste cero por frame, solo composicion GPU --- */

#crt-scanlines {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	background-image: repeating-linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.55) 0px,
		rgba(0, 0, 0, 0.55) 1px,
		rgba(0, 0, 0, 0) 1px,
		rgba(0, 0, 0, 0) 3px
	);
	background-size: 100% 3px;
	will-change: opacity;
}

#crt-vignette {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(
		ellipse at center,
		rgba(0, 0, 0, 0) 45%,
		rgba(0, 0, 0, 0.45) 78%,
		rgba(0, 0, 0, 0.85) 100%
	);
	will-change: opacity;
}

/* Curvatura CRT opcional (transform 3D: lo resuelve la GPU) */
#stage.curved #screen {
	transform: perspective(900px) scale(1.012);
	border-radius: 1.2vmin;
}

/* --- Panel de propiedades del mock (solo en navegador, nunca en WE) --- */
#we-mock-panel {
	position: fixed;
	top: 10px;
	right: 10px;
	width: 290px;
	max-height: calc(100vh - 20px);
	overflow-y: auto;
	background: rgba(12, 10, 20, 0.94);
	border: 1px solid rgba(53, 224, 161, 0.35);
	border-radius: 6px;
	color: #cfe9df;
	font: 11px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace;
	padding: 8px 10px 12px;
	z-index: 9999;
	cursor: auto;
	backdrop-filter: blur(2px);
}
#we-mock-panel h2 {
	font-size: 12px;
	letter-spacing: 1px;
	color: #35e0a1;
	margin-bottom: 6px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#we-mock-panel h2 button {
	background: transparent;
	border: 1px solid rgba(53, 224, 161, 0.4);
	color: #35e0a1;
	border-radius: 3px;
	font: inherit;
	cursor: pointer;
	padding: 0 6px;
}
#we-mock-panel.collapsed .mock-body { display: none; }
#we-mock-panel .row { margin: 5px 0; }
#we-mock-panel .row label { display: block; color: #8fb3a8; margin-bottom: 2px; }
#we-mock-panel .row .val { float: right; color: #ff4fa3; }
#we-mock-panel input[type=range] { width: 100%; accent-color: #35e0a1; }
#we-mock-panel input[type=color] { width: 100%; height: 20px; background: none; border: 0; }
#we-mock-panel select, #we-mock-panel input[type=text] {
	width: 100%;
	background: #171326;
	color: #cfe9df;
	border: 1px solid #2c2740;
	border-radius: 3px;
	font: inherit;
	padding: 2px 4px;
}
#we-mock-panel .sep {
	margin: 10px 0 4px;
	color: #ff4fa3;
	border-top: 1px solid rgba(255, 79, 163, 0.25);
	padding-top: 6px;
	letter-spacing: 1px;
}
#we-mock-panel .actions { margin-top: 10px; display: flex; gap: 6px; }
#we-mock-panel .actions button {
	flex: 1;
	background: #1d1830;
	border: 1px solid #35e0a1;
	color: #35e0a1;
	border-radius: 3px;
	padding: 4px;
	font: inherit;
	cursor: pointer;
}
#we-mock-panel .actions button:hover { background: #35e0a1; color: #0b0812; }