/**
 * Schranken-Wächter – Frontend Styles
 */

/* ── Wrapper ── */
.swae-wrapper {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	cursor: pointer;
	outline: none;          /* tabindex outline suppressed; focus handled by JS */
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: none;     /* hand off all touch events to our JS handler */
}

/* ── Footer mode: fixed height, set inline by PHP ── */
.swae-mode-footer {
	/* height is set as inline style by PHP */
}

/* ── Landingpage mode: height set by JS (5:4 = 80% of width) ── */
.swae-mode-landingpage {
	/* height controlled dynamically in game.js */
}

/* ── Canvas fills the wrapper ── */
.swae-wrapper canvas {
	display: block;
	width: 100%;
	height: 100%;
	image-rendering: -webkit-optimize-contrast; /* sharper pixel rendering on WebKit */
	image-rendering: crisp-edges;
}

/* ── Subtle loading state (before JS boots) ── */
.swae-wrapper:not([data-ready]) canvas {
	background: #e8ecf0;
}

/* ── Responsive tweaks ── */
@media (max-width: 480px) {
	/* On very small screens give footer mode a bit more breathing room */
	.swae-mode-footer {
		min-height: 120px;
	}
}