/* ============================================================
   Dino Game Pro — plugin styles
   The game renders entirely inside <canvas>; this CSS just
   provides the outer shell, responsive sizing, and a subtle
   glow effect that reacts to the current phase.
============================================================ */

.dgp-app {
	display:       block;
	max-width:     800px;
	margin:        0 auto 24px;
	user-select:   none;
	-webkit-user-select: none;
}

.dgp-canvas-wrap {
	width:          100%;
	border-radius:  12px;
	overflow:       hidden;
	box-shadow:     0 4px 24px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.08);
	line-height:    0;  /* kills phantom gap under canvas */
	cursor:         pointer;
}

.dgp-canvas {
	width:    100%;
	height:   auto;
	display:  block;
	outline:  none;
}

.dgp-mobile-hint {
	display:     none;
	text-align:  center;
	font-size:   0.75rem;
	color:       #718096;
	margin-top:  8px;
	font-family: sans-serif;
}

@media (max-width: 520px) {
	.dgp-mobile-hint { display: block; }
	.dgp-canvas-wrap { border-radius: 8px; }
}

/* Reduced motion: disable JS animation is handled in the game;
   we just remove the box-shadow pulse here if the user prefers. */
@media (prefers-reduced-motion: reduce) {
	.dgp-canvas-wrap { box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
}