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

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

#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* start / teleport overlay */
#overlay {
	position: fixed; inset: 0;
	display: flex; align-items: center; justify-content: center;
	background: rgba(5, 10, 25, 0.6);
	backdrop-filter: blur(4px);
	z-index: 10;
	font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
	color: #eef2ff;
}
#overlay[hidden] { display: none; }
#panel {
	max-width: 420px; width: 90%;
	padding: 28px 32px;
	background: rgba(15, 23, 42, 0.92);
	border: 1px solid rgba(148, 163, 184, 0.25);
	border-radius: 16px;
	text-align: center;
}
#panel h1 { font-size: 26px; margin-bottom: 4px; }
#panel .sub { font-size: 13px; color: #9fb0d0; margin-bottom: 16px; }
#message { font-size: 13px; line-height: 1.7; color: #fca5a5; white-space: pre-wrap; }
#message:not(:empty) { margin-bottom: 14px; }

#spawn-buttons { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
#spawn-buttons button {
	padding: 12px; font-size: 15px; cursor: pointer;
	color: #eef2ff; background: #2563eb; border: none; border-radius: 10px;
}
#spawn-buttons button:hover { background: #3b82f6; }
#spawn-buttons button:disabled { background: #334155; color: #94a3b8; cursor: default; }

.help { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 12px; color: #9fb0d0; }
.help b { width: 100%; color: #cbd5e1; }

/* HUD */
#loading {
	position: fixed; top: 14px; right: 16px; z-index: 5;
	padding: 6px 12px; border-radius: 8px;
	background: rgba(15, 23, 42, 0.75); color: #cbd5e1;
	font: 12px "Hiragino Sans", sans-serif;
}
#mode-hint {
	position: fixed; top: 14px; left: 16px; z-index: 5;
	padding: 6px 12px; border-radius: 8px;
	background: rgba(15, 23, 42, 0.75); color: #cbd5e1;
	font: 12px "Hiragino Sans", sans-serif;
}
#crosshair {
	position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
	color: rgba(255, 255, 255, 0.7); font: 20px monospace; z-index: 5;
	pointer-events: none;
}
#attrib {
	position: fixed; left: 8px; bottom: 6px; z-index: 5;
	color: rgba(255, 255, 255, 0.85); font: 11px "Hiragino Sans", sans-serif;
	text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
	pointer-events: none;
}